81383
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>
![Exception Using PayPal-PHP-SDK [Http response code 400]](/skin/wt/img/t.gif)