responsive web design. computer electronics

RWD - adjusting to mobile phones and tablets

Tags: Bootstrap, CSS3, HTML5, RWD, website

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
  • rzeczpospolita
  • uniwersytet-warszawski
  • parkiet
  • plk
  • qualitysolicitors
  • espeo
  • slik
  • dupont-tyvek
  • ekiosk
  • sigma
  • emma
  • caselogic
  • gusmahome
  • oltravel
  • laszkiewicz
  • stilnovisti
  • digimania
  • bong
  • wdf
  • mgfinance
  • tam-pol
  • stage-vision
  • bestpharma
  • ipgo