CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3responsive-design
AmbroseChapel
AmbroseChapel

Reputation: 12087

How to achieve this desktop/mobile layout with Bootstrap 3?

I have a design I'm trying to implement, and I'm stuck on how to do it properly with Bootstrap 3. I'm not very experienced with Bootstrap and I'm sure I'm missing something which will make the concepts fall into place.

Three DIVs with background images to be seen on desktop in this configuration:

desktop view

but to be seen on mobile in this configuration:

mobile view

I'm not sure how to make this work—I could do it by having two different #3 divs, one hidden and one shown in desktop/mobile respectively, but that doesn't seem right. I could do it by adding my own @media rule but that seems to go against the point of Bootstrap too.

Upvotes: 0

Views: 670

Answers (3)

Stewartside
Stewartside

Reputation: 20905

This is very simple and you can do it using the grid system already within bootstrap.

.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}

.row-500 {
  width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .row-500 {
    width: 250px;
  }
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row-500">
  <div class="col-md-6 blue">250px</div>
  <div class="col-md-6 green">250px</div>
</div>
<div class="row-500">
  <div class="col-md-12 red">500px unless under 500px then its 250px</div>
</div>

CodePen

If you need them to specifically be 250px wide, then you can add additional classes to specify that as well as setting the container to be a specific width only.

Read more about Bootstrap Grids here

Upvotes: 3

BrTkCa
BrTkCa

Reputation: 4783

For this case, you can specify the form of apresentation the divs in each situation:

<div class="row">    
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       1 - 250
    </div>
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       2 - 250
    </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       3 - 500
    </div>
</div>

The system of the bootstrap grids it's simply, follow the documentation for your inquiry:

http://getbootstrap.com/css/#grid

Upvotes: 1

stanze
stanze

Reputation: 2480

Try this Fiddle, 

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">1<br/>250</div>
        <div class="col-md-6">2<br/>250</div>        
    </div>
    <div class="row">
        <div class="col-md-12">3<br/>250</div>
    </div>
</div>

Upvotes: 1

Related Questions