1

I am using Bootstrap to create a layout that displays for desktop, tablet and mobile. What I am trying to achieve is illustrated here:

enter image description here

To do this I have created three divs:

<div class="row">
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
</div>

The middle div will be hidden on tablet view, then the last div will fall below the first on mobile view.

Using what I currently have, all three divs display correctly on desktop, but in tablet & mobile all three collapse vertically.

Is there an easy way to do this with Bootstrap, or must I write my own CSS media queries?

Mike Causer
  • 8,196
  • 2
  • 43
  • 63
John 'Mark' Smith
  • 2,564
  • 9
  • 43
  • 69

4 Answers4

5

To hide the middle div, use utilities class described in bootstrap:

Bootstrap 3

Bootstrap doc

enter image description here

Use the visible-lg class to hide the div on tablets and phones.

I suggest to use col-sm and col-xs to collapse or not the div depending the width (Learn more about grid system):

<div class="row">
  <div class="col-sm-3 col-xs-9">Text</div>
  <div class="col-sm-3 visible-lg">Text</div>
  <div class="col-sm-3 col-xs-9">Text</div>
</div>

See this fiddle

Bootstrap 2.3

Bootstrap doc

enter image description here

Use the visible-desktop class to hide the div on tablets and phones.

Getz
  • 3,983
  • 6
  • 35
  • 52
1
.row {width:100%;position:relative;}
.col-md-3{width:3.33333%;float:left;padding:10px;height:100px;}
Kisspa
  • 584
  • 4
  • 11
1

Apart from @Getz answer here are some references addressing your issues in detail.

To target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){
.middle_div { display: none;}
/* other responsive styles*/
}

For tablets

@media only screen and (min-device-width: 768px){
.middle_div { display: none;}
}

A best possible solution to workout for all devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Community
  • 1
  • 1
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
1
<div class="row visible-lg">
  <div class="col-md-4">Text</div>
  <div class="col-md-4">Text</div>
  <div class="col-md-4">Text</div>
</div>

<div class="row visible-md">
  <div class="col-md-6">Text</div>
  <div class="col-md-6">Text</div>
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Text</div>      
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Text</div>      
 </div>
Sudheer
  • 2,955
  • 2
  • 21
  • 35