CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
George Edwards
George Edwards

Reputation: 9229

Simple column and row ReOrdering with bootstrap mobile layout?

I am using bootstrap and its grid feature for my web layout. I have my base set up for medium and large screens, but I am developing my layout for small screens. I have been able to create the correct result, but it always makes the code much more complex. I wonder if there is a way, possibly using the bootstrap column ordering feature, of creating the layout below, without too much complication to the HTML, ideally just using HTML and CSS? Here is my code:

 <div class="container-fluid PageView text-center">
            <div class="row Page2">
                <div class="col-md-2"></div>
                <div class="col-md-2"> <span class="glyphicon glyphicon-bullhorn"></span> 
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2"> <span class="glyphicon glyphicon-ok"> </span>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2"> <span class="glyphicon glyphicon-phone"> </span>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-2"><h2>Title</h2></div>
                <div class="col-md-1"></div>
                <div class="col-md-2"><h2>Title</h2></div>
                <div class="col-md-1"></div>
                <div class="col-md-2"><h2>Title</h2></div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-2"><p class="lead">Text</p></div>
                <div class="col-md-1"></div>
                <div class="col-md-2"><p class="lead">Text</p></div>
                <div class="col-md-1"></div>
                <div class="col-md-2"><p class="lead">Text</p></div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>

My original layout ( which I want to keep for medium+ sized layouts ):

[1A] [1B] [1C]

[2A] [2B] [2C]

[3A] [3B] [3C]

This is the layout I would like for small screens.

[1A]

[1B]

[1C]

[2A] [3A]

[2B] [3B]

[2C] [3C]

Any suggestions would be much appreciated.

Upvotes: 0

Views: 59

Answers (1)

vanburen
vanburen

Reputation: 21663

You can acheive this by nesting the title and text columns into new rows so when the viewport changes only the first 3 columns stack [1A, 1B, 1C] while the remaining (nested columns) fall into a 6x6 column formation.

See Docs and working example Snippet.

body {
  padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <div class="alert alert-warning"><span class="glyphicon glyphicon-bullhorn"></span> 1A</div>
    </div>
    <div class="col-sm-4">
      <div class="alert alert-warning"><span class="glyphicon glyphicon-ok"></span> 1B</div>
    </div>
    <div class="col-sm-4">
      <div class="alert alert-warning"><span class="glyphicon glyphicon-phone"></span> 1C</div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-info">
            <h2>Title 2A</h2>

          </div>
        </div>
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-danger">
            <p class="lead">Text 3A</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-info">
            <h2>Title 2B</h2>

          </div>
        </div>
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-danger">
            <p class="lead">Text 3B</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-info">
            <h2>Title 2C</h2>

          </div>
        </div>
        <div class="col-xs-6 col-sm-12">
          <div class="alert alert-danger">
            <p class="lead">Text 3C</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions