CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nitsorn Wongsajjathiti
Nitsorn Wongsajjathiti

Reputation: 317

Bootstrap grid in xs

I am using Bootstrap grid as follows:

<div class="row">
  <div class="col-md-6 col-sm-12"> Column A </div>
  <div class="col-md-6 col-sm-12"> Column B </div>
</div>

Which obviously shows Column A on the left and Column B on the right.When move to smaller screens it will be A on top and B below.

Is there a way to keep A on the left and B on the right on larger screens, but let B be on top and A below on small screens?

Thank you.

Upvotes: 0

Views: 66

Answers (2)

OSAMA ORABI
OSAMA ORABI

Reputation: 441

 <div class="row">
    <div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div>
    <div class="col-md-6 col-sm-12"> Column B </div>
    <div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div>
</div>

you can add a duplicate column from A after B. Hide the first A when the screen is sm or xs. And hide the second A when screen is lg or md.

Upvotes: 1

vanburen
vanburen

Reputation: 21663

You can use Bootstrap Push and Pull.

body,
html {
  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-md-6 col-md-push-6">
      <div class="alert alert-info">B</div>
    </div>
    <div class="col-md-6 col-md-pull-6">
      <div class="alert alert-danger">A</div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions