81383

bootstrap column order and wrapping

Question:

I have four columns that I would like to display as two rows (of two) on medium devices and four rows on small devices. The problem being that the content needs to be in order vertically, so that the columns on medium devices are arranged like this:

<blockquote> ONE THREE TWO FOUR </blockquote>

and on small devices like this:

<blockquote> ONE TWO THREE FOUR </blockquote>

I have been unable to accomplish the desired layout using the col-sm-push-* class or any other tricks I've tried from my research. It seems to me that it should be a simple thing to do, but I'm baffled.

<div class="container"> <div class="row"> <div class="col-md-6">ONE</div> <div class="col-md-6">TWO</div> <div class="col-md-6">THREE</div> <div class="col-md-6">FOUR</div> </div> </div>

Answer1:

You'll want to nest the DIVs like this..

<a href="http://www.codeply.com/go/G7D6WvVIqZ" rel="nofollow">http://www.codeply.com/go/G7D6WvVIqZ</a>

<div class="row"> <div class="col-sm-6"> <div class="col-sm-12">ONE</div> <div class="col-sm-12">TWO</div> </div> <div class="col-sm-6"> <div class="col-sm-12">THREE</div> <div class="col-sm-12">FOUR</div> </div> </div>

Answer2:

You can make use of insertBefore function of jQuery:

$(document).ready(function(){ $(window).resize(function(){ if($(this).width()>992 && $(this).width()<1199) { $('.three').insertBefore('.two'); }else{ $('.two').insertBefore('.three'); } }) })

Here's the working link:<a href="http://jsfiddle.net/wVVbT/171/" rel="nofollow">http://jsfiddle.net/wVVbT/171/</a>

Answer3:

Use nesting to group your <div>'s.

Here's an example: <a href="https://jsbin.com/yawoka/edit?html,output" rel="nofollow">https://jsbin.com/yawoka/edit?html,output</a>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Example</title> </head> <body> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-12"> <div class="col-sm-6">ONE</div> <div class="col-sm-6">TWO</div> </div> <div class="col-xs-6 col-sm-12"> <div class="col-sm-6">THREE</div> <div class="col-sm-6">FOUR</div> </div> </div> </div> </body> </html>

Recommend

  • if statement fails with variable from CoreData managed object
  • Responsive site works on desktop but not mobile
  • How can I gracefully degrade CSS viewport units?
  • Password-protect the macros of a second workbook from a first using VBA
  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • calling a VB.net function from javascript
  • ruby - lazily iterate through an array
  • FSO returns non-existing subfolders
  • Create CSV file from c#: extra character in excel
  • AngularJS- How to pass data from one controller to another on ng-click()?
  • href inside href [duplicate]
  • How does this Java code which determines whether a String contains all unique characters work? [dupl
  • SEO friendly 301 redirect .htm to .aspx
  • Odd function behaviour with Tkinter
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • Create Instant using a negative year
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • Could not find rake using whenever rails
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Can't mass-assign protected attributes when import data from csv file
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal