responsive web design. computer electronics

RWD - adjusting to mobile phones and tablets

Tags: Bootstrap, CSS3, HTML5, RWD, websites

Maciej Skrzypczak

WordPress / Responsive Developer

The most convenient way is to use Bootstrap library ( With it, the website is divided into 12 blocks, which create columns col. The division is made depending on the device on which the website is displayed. Class types include: xl (from 1200 px), lg (from 922px), md (from 768px), sm (from 576px):

<div class="container">
 <div class="row">
  <div class="col-12 col-sm-8 col-md-8">
  <div class="col-12 col-sm-4 col-md-3 offset-md-1">

Block order sorting depending on resolution, command order:

<div class="container">
 <div class="row">
  <div class="col-6 col-sm-6 order-sm-2">
  <div class="col-6 col-sm-6 order-sm-1">

Whereas directly in CSS3 code, media types can be adjusted with the use of media-query:

@media only screen and (min-width:992px) and (max-width:1199px){


  • play
  • plk
  • pkp-cargo
  • uniwersytet-warszawski
  • politechnika-poznanska
  • uniwersytet-adama-mickiewicza
  • termy-maltanskie
  • rzeczpospolita
  • v33
  • ferguson
  • unitra
  • wyzsza-szkola-urody-i-edukacji
  • wyzsza-szkola-handlu-i-uslug