Bootstrap 3 changing div order on small screens only
DEMO: http://jsbin.com/uZiKAha/1
DEMO w/edit: http://jsbin.com/uZiKAha/1/edit
Yes, this can be done without JS using BS3 nesting and pushing/pulling and all the floats clear:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
LOGO
</div>
<div class="col-xs-6 col-sm-8">
<div class="row">
<div class="col-sm-6 col-sm-pull-6 boxb">
B
</div>
<div class="col-sm-6 boxa">
A
</div>
</div>
<!--nested .row-->
</div>
</div>
</div>
How to change the order of 3 bootstrap columns at small screen size using push and pull?
In this case start from mobile
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div>
<div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div>
<div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div>
</div>Bootstrap: reorder 3 columns on small screens
Assuming "A" is taller as in your picture, just use pull-right on the other columns, and col-xs-12 to ensure full width on mobile...
Demo
<div class="row">
<div class="col-xs-12 col-md-6 pull-right">
<div>
B
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
A
</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>
C
</div>
</div>
</div>
Demo
How to change div order using bootstrap 3?
You need to change HTML and use display: flex to .row and give order to .col
@media (max-width: 1199px) {
.changeOrder {
display: flex;
flex-direction: column;
}
.changeOrder .one {
order: 1;
}
.changeOrder .two {
order: 2;
}
.changeOrder .three {
order: 3;
}
.changeOrder .four {
order: 4;
}
.changeOrder .five {
order: 5;
}
.changeOrder .six {
order: 6;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row changeOrder">
<div class="col-lg-6 one">
<p>A</p>
</div>
<div class="col-lg-6 five">
<p>B</p>
</div>
<div class="col-lg-6 three">
<p>C</p>
</div>
<div class="col-lg-6 two">
<p>D</p>
</div>
<div class="col-lg-6 four">
<p>E</p>
</div>
<div class="col-lg-6 six">
<p>F</p>
</div>
</div>How do I change Bootstrap 3 column order on mobile layout?
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Working fiddle here.
Change div order with bootstrap 3
Another possible solution I find simpler :
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 img">
img
</div>
<div class="visible-sm col-sm-6 price">
price
</div>
<div class="col-md-6 col-sm-12 col-xs-12 mytable">
table
</div>
<div class="col-md-3 hidden-sm col-xs-12 price">
price
</div>
</div>
</div>
Bootstrap: Change container order on small screens
flexbox proof of concept.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
color: white;
text-align: center;
}
body {
height: 100%;
}
h2 {
display: inline-block;
background: #000;
padding: .25em;
}
.page {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 75px;
background: darkgreen;
}
.banner {
flex: 0 0 100px;
width: 80%;
margin: auto;
background: darkred;
}
main {
flex: 1;
width: 80%;
margin: auto;
display: flex;
}
.content {
width: 75%;
background: yellow;
}
aside {
width: 25%;
background: fuchsia;
}
footer {
flex: 0 0 100px;
background: lightblue;
}
@media screen and (max-width: 768px) {
.banner,
main {
width: 100%;
}
main {
flex-direction: column;
order: -1;
}
.content,
aside {
flex: 1;
width: 100%;
}
aside {
flex: 0 0 150px
}
}<div class="page">
<header>
<h2>1</h2>
</header>
<div class="banner">
<h2>2</h2>
</div>
<main>
<div class="content">
<h2>3</h2>
</div>
<aside>
<h2>4</h2>
</aside>
</main>
<footer>
<h2>5</h2>
</footer>
</div>Bootstrap reorder multiple columns on smaller screens
I will consider that with on small (mobile) screens you want to say xs screen size.
I really do not know if it's the best way to fix your problem, but you can try to use hidden-xs and visible-xs to change the order in different devices sizes.
<div class="container">
<div class="row hidden-xs" style="font-size: 150%;">
<div class="col-lg-2 col-sm-12 bg-success">
Marketing
</div>
<div class="col-lg-2 col-sm-12 bg-danger">
Online chat
</div>
<div class="col-lg-6 col-sm-12 bg-primary">
Main chat
</div>
<div class="col-lg-2 col-sm-12 bg-success">
Marketing 2
</div>
</div>
<div class="row visible-xs" style="font-size: 150%;">
<div class="col-lg-6 col-sm-12 bg-primary">
Main chat
</div>
<div class="col-sm-12 bg-success">
Marketing
</div>
<div class="col-sm-12 bg-danger">
Online chat
</div>
<div class="col-sm-12 bg-success">
Marketing 2
</div>
</div>
</div>
So with that, the template which the "Main chat" div appears in the top will be visible only in xs devices.
Bootstrap 4: how to change the order of a columns when the screen size changes
You can make use of Bootstrap 4's order classes.
Unfortunately Bootstrap 4's layout classes are mobile-first, so you'll need to specify that the text should come after the image by default, and override this for large screens.
To drop the text below the image on medium and smaller devices, you'll want to give the text the classes order-2 and order-md-1, and the image the classes order-1 and order-md-2.
This can be seen in the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section id="" class="pt-3 mt-3">
<div class="container">
<div class="row">
<div class="col-md-6 my-auto text-right order-2 order-md-1">
<h3 class="display-3 lato_text">Description</h3>
<p class="lead">On the map, click on an OddJob to get a quick preview.</p>
<p class="lead">In the preview, you will see the title and price of the job.</p>
</div>
<div class="col-md-6 order-1 order-md-2">
<div class="text-center">
<img id="phone-screenshot" src="http://placehold.it/100" class="img-fluid mb-3">
</div>
</div>
</div>
</div>
</section>Related Topics
Vertical Space Created from Float
How to Get Grid Items of Different Lengths to Wrap
@ Sign and Variables in CSS Keyframes Using Less CSS
What's the Purpose of Using CSS Browser Reset Code
Force Ckeditor to Add a Class to P-Tags
How to Create Custom Scrollbar for Mozilla Firefox with CSS
Increase Size of List-Style-Bullet Type
Cannot Get Bootstrap 4 Horizontal Form to Work as Required
Are CSS Stylesheets Loaded Asynchronously
Alternate Color Dot Over the Letter I
Why Does the CSS3 Pseudo ::Selection Not Change the Color for All Parts
Changing the Color of a Jquery UI Slider as You Slide It
Label and Text Box on the Same Line Using CSS
What Is the Right Combination of Prefixes for CSS Transitions and Transforms
CSS Calc() - Multiplication and Division with Unit-Ed Values