CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user7154576
user7154576

Reputation:

HTML - Reorder Bootstrap Columns

I have three div as shown in below image: Design

How can I achieve the desired layout using Bootstrap-3?

HTML:

 <div class="row">
     <div class="col-md-5" col-md-push-7>
        <div>1</div>
        <div>3</div>
     <div>
     <div class="col-md-7" col-md-push-5>
        <div>2</div>
     </div>
  </div>

Upvotes: 1

Views: 42

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

Use following code structure to achieve this layout:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-7 pull-right">1</div>
    <div class="col-xs-12 col-sm-5">2</div>
    <div class="col-xs-12 col-sm-7 pull-right">3</div>
  </div>
</div>


.box {
  border: 2px solid black;
  margin-bottom: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-7 pull-right">
      <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-sm-5">
      <div class="box box2">2</div>
    </div>
    <div class="col-xs-12 col-sm-7 pull-right">
      <div class="box">3</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions