Change the column order on different view port

Hello i do have this bootstrap in div

						<div class="col-md-4 column Smain1">
							<h4>PEST MANAGEMENT</h4>
						</div>
				
						<div class="col-md-4 column Smain2">
							<h4>FOOD SAFETY</h4>
						</div>
				
						<div class="col-md-4 column Smain3">
							<h4>BIOSECURITY</h4>
						</div>

Open in new window


I do need on 767PX view port reorder this to show like this

						<div class="col-md-4 column Smain1">
							<h4>FOOD SAFETY</h4>
						</div>
				
						<div class="col-md-4 column Smain2">
							<h4>BIO SECURITY</h4>
						</div>
				
						<div class="col-md-4 column Smain3">
							<h4>PEST MANAGEMENT</h4>
						</div>

Open in new window

jaylab2Asked:
Who is Participating?
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hello Jaylab2,
I assume you are talking about VISUALLY rearranging how the divs get displayed in diff resolutions...

Step1:
change your HTML code to as below where we add new classes to the divs:

<div class="col-lg-4 column Smain2 floatright">
	<h4>FOOD SAFETY</h4>
</div>
<div class="col-lg-4 column Smain3 floatright">
	<h4>BIOSECURITY</h4>
</div>
<div class="col-lg-4 column Smain1 floatleft">
	<h4>PEST MANAGEMENT</h4>
</div>

Open in new window


Step 2:
add this code to the normal part of CSS (means in code without any media query)
.floatleft {
	float: left !important;
}
.floatright {
	float: right !important;
}

Open in new window


Step 3:
add this below code to your CSS with a media query to target <767 resolution

@media (max-width: 768px) {
.floatleft {
	float: none !important;
}
.floatright {
	float: none !important;
}
}

Open in new window


Note: I have tested the above code using Bootstrap v3.3.5
let me know if you face any problems

thanks,
Prasadh
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can hide and show.  Here I have added a parent div but you can apply hidden and show to  the individual  div's as well.  You may also want to add a row class to the parent div's http://jsbin.com/moriqa/1/edit.  The documentation for this is at http://getbootstrap.com/css/#responsive-utilities

<div class="hidden-xs">
						<div class="col-md-4 column Smain1">
							<h4>PEST MANAGEMENT</h4>
						</div>
				
						<div class="col-md-4 column Smain2">
							<h4>FOOD SAFETY</h4>
						</div>
				
						<div class="col-md-4 column Smain3">
							<h4>BIOSECURITY</h4>
						</div>
    
  </div>
  <div class="visible-xs-block">
    						<div class="col-md-4 column Smain1">
							<h4>FOOD SAFETY xs</h4>
						</div>
				
						<div class="col-md-4 column Smain2">
							<h4>BIO SECURITY</h4>
						</div>
				
						<div class="col-md-4 column Smain3">
							<h4>PEST MANAGEMENT</h4>
						</div>
  </div>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Here is the option to use individual div's with show/hide http://jsbin.com/moriqa/2/edit

		<div class="col-md-4 column Smain1 hidden-xs">
							<h4>PEST MANAGEMENT sm+</h4>
						</div>
				
						<div class="col-md-4 column Smain2">
							<h4>FOOD SAFETY</h4>
						</div>
				
						<div class="col-md-4 column Smain3">
							<h4>BIOSECURITY</h4>
						</div>
    
    					<div class="col-md-4 column Smain1 visible-xs-block">
							<h4>FOOD SAFETY xs</h4>
						</div>

Open in new window

0
 
jaylab2Author Commented:
I am looking to re-order the div and not show and hide!
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
oops !!

by mistake I posted the HTML code with col-lg (while testing) my bad :(

pls use this below HTML code so it is same as your original code:

<div class="col-md-4 column Smain2 floatright">
	<h4>FOOD SAFETY</h4>
</div>
<div class="col-md-4 column Smain3 floatright">
	<h4>BIOSECURITY</h4>
</div>
<div class="col-md-4 column Smain1 floatleft">
	<h4>PEST MANAGEMENT</h4>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.