CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Marcin Doliwa
Marcin Doliwa

Reputation: 3659

How can I set this bootstrap grid for sm and xs size displays?

I have a grid layout for md+ displays which looks like (they are all in one row div):

A(col-md-8) | B(col-md-4)
C(col-md-8) | D(col-md-4)

For small and extra small displays I'd like to have:

B(col-sm-6) | D(col-sm-6)
A(col-sm-12)
C(col-sm-12)

Is it possible to do something like this with bootstrap grid system?

Upvotes: 3

Views: 2731

Answers (3)

Michael Oryl
Michael Oryl

Reputation: 21652

You can do it with a little be of redundant code.

<div class="row"">
    <div class="hidden-xs hidden-sm col-md-8">COL A (MD and LG only)</div>
    <div class="col-xs-6 col-md-4">COL B</div>
    <div class="hidden-md hidden-lg col-xs-12">COL A (XS and SM only)</div>
    <div class="col-xs-12 col-md-8">COL C</div>
    <div class="col-cs-6 col-md-4">COL D</div>
</div>

You can get the B/D ordering the way you want without anything tricky, but that gets you:

A
B D
C

In order to get A where you like on XS/SM devices, you need to have that column twice and mark it hidden for certain sizes. Also note that I am only using -XS and -MD for the column widths. XS covers SM when no separate SM is specified, just like MD covers LG as well. The responsive utilities hidden-xx and visible-xx, however, need to be specified for each size.

Hope that helps. I know it isn't optimal.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362520

You can use nesting along with push pull like this..

<div class="container">
    <div class="row">  
        <div class="col-md-4 col-md-push-8 col-xs-12">
          <div class="row">
            <div class="col-xs-6 col-md-12"> B </div>
            <div class="col-xs-6 col-md-12"> D </div>
          </div>
        </div>
        <div class="col-md-8 col-md-pull-4 col-xs-12">
           <div class="row">
            <div class="col-xs-12"> A </div> 
            <div class="col-xs-12"> C </div>
           </div>
        </div>  
    </div>
</div>

Demo: http://bootply.com/BS5Vuz0XEt

Upvotes: 4

Dirk Jan
Dirk Jan

Reputation: 2469

Grid Classes

The Bootstrap grid system has four classes:

  • xs (for phones)
  • sm (for tablets)
  • md (for laptops)
  • lg (for desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

Grid System Rules

Some Bootstrap grid system rules:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding Use rows to create horizontal groups of columns Content should be placed within columns, and only columns may be immediate children of rows Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4.

Examples

(Source)

Upvotes: 1

Related Questions