I want to add a gap between each column. If I add a margin property the columns do not fit in one row. How could I achieve 4 columns each row with gaps?
<style>
.test {
border: 5px solid red;
}
</style>
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
</div>
</div>
enter image description here
EDIT:
I think I overlook something ...
This works fine:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
but if I add the latest bootstrap reference it does not work.
Like this:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
Margins are essential to how the grid columns work. Instead adjust the padding to effect the space around the content of the columns...
https://codeply.com/go/YySEuVELp6
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
</div>
</div>
Note: The space between columns is known as the "gutter".
.background {
background: blue;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test1</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test2</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test3</h1>
</div>
</div>
</div>
</div>
https://codepen.io/justmemaarten/pen/mgYOGV
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have multiple rows of a grid where there is text in one column and an image in the other. For every row the order is reversed so that i looks nice on desktop-mode. The HTML is rendered from a CMS, so the order is set by the user and is dynamic.
For mobile mode I would however always want to have the image on top, and then the text below. How can I rearrange my grid to do this on a media query?
I have a fiddle here on how it works on desktop, but no Idea how to do the media query to always get the image on top, and text below. Im guessing flexbox might be able to solve this somehow? All help greatly appreciated!
https://jsfiddle.net/3opref6L/
This code gets rendered by the CMS and might be longer or shorter.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
</div>
This is a DYNAMIC SOLUTION with flexbox on top of the Bootstrap and This will work on any number of rows dynamically. Since Bootstrap is based on Flexbox itself, This solution worked for us.
UPDATE: Some fixes performed to override bootstrap specific CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#media (max-width: 768px) {
.container .row {
display: flex;
flex-direction: column;
}
.container .row:nth-child(2n-1) .col:first-child {
order: 2;
}
.container .row:nth-child(2n-1) .col:last-child {
order: 1;
}
}
#media (min-width: 769px) {
.container .row {
display: flex;
flex-direction: row !important;
}
.container .row .col:first-child {
order: 1;
}
.container .row .col:last-child {
order: 2;
}
}
/* Bug Fix */
#media (min-width: 576px) {
.col-sm-12 {
flex: 0 0 50% !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./OrderIssue.css" />
</head>
<body>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
</div>
</body>
</html>
Working correctly now.
if you use bootstrap 4 in this version of bootstrap used flex box to grid systems .
There are good features in Flexbox, one of which is the possibility of flex-direction . in this feature you can set row-reverse and resolve this problem.
Using a class is usually easier:
flex-sm-column-reverse flex-md-row
Example here: https://codepen.io/yasgo/pen/NWRgejr
I need to introduce a new class for make the same structure you want use class flex-row-reverse class with row. it works perfect as you want.
This is the small code to understand what I want to tell.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
</body>
</html>
.r1{
border:1px solid black;
}
.r2{
border:1px solid black;
text-align:center;
}
.r3{
border:3px solid blue;
text-align:center;
}
.t1{
border:1px solid red;
background-color:red;
text-align:center;
border:1px solid black;
}
.head{
border:2px solid black;
height:50px;
background-color:green;
}
.c{
height: 100px;
border: 1px solid black
}
.cell{
border: 5px solid green;
}
.r4{
}
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="stylo2.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css" />
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<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>
</head>
<body>
<div class="container-fluid">
<div class="row r1">
<div class="col-md-12">
<div class="row head">
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
</div>
<div class="col-md-9">
Content
</div>
<div class="col-md-1">
</div>
</div>
</div>
</div>
<div class="row head">
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
</div>
<div class="col-md-9">
Content
</div>
<div class="col-md-1">
</div>
</div>
</div>
</div>
<div class="row r1">
<div class="col-md-12 c">
Table1
</div>
</div>
<div class="row r2">
<div class="col-md-6 c">
Table2
</div>
<div class="col-md-6 c">
Table3
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row r3">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 t1">
Heading
</div>
</div>
<div class="row r">
<div class="col-md-1 cell">
1
</div>
<div class="col-md-5 cell">
ABC
</div>
<div class="col-md-5 cell">
234
</div>
<div class="col-md-1 cell">
5
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row r3">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 t1">
Heading
</div>
</div>
<div class="row playerrow">
<div class="col-md-1 cell">
1
</div>
<div class="col-md-5 cell">
ABC
</div>
<div class="col-md-5 cell">
234
</div>
<div class="col-md-1 cell">
5
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hey,
when I'm on a Desktop Screen, the code is fine, but when I switch to my mobile Device, i would like to have the content of my last row with the cells "1 ABC 234 5" besides each other too (like in desktop version) instead of each col building a new row. Also they shoud have a fixed with that not depends on its content.
Thanks in advance
Easy. Remove the -md- from the classes and leave col-1, col-5 etc. Then they won't be responsive.
I'm unable to horizontally align my columns in bootstrap. What I'm wanting is the image to be on the left, and the text to be on the right, but it keep stacking vertically. Can I get some help with this?
From my understanding, col-md-6 will split the page into 2 columns, and col-xs-12 will stack them vertically on mobile, but it doesn't seem to be doing that for me. Is something I'm doing that's overriding the default bootstrap css?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</body>
</html>
first of all, you need <div class = "row"> for every row of content you want to insert. That could be messing up your layout.
Example from your code:
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
</div>
and so on.
This should solve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>
FYI In Bootstrap-4 there is no class like col-xs-* so you need to replace col-xs-12 with col-12 and you also forget you two columns to wrap with row class I have also checked in your code you need also put one meta tag in your head for require responsive site like
And the updated code is as Follow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-12 col-md-8">
github
</div>
<div class="col-12 col-md-8">
linkedin
</div>
<div class="col-12 col-md-8">
twitter
</div>
<div class="col-12 col-md-8">
blog
</div>
<div class="col-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I Think this will help you. Happy code :)
This question already has answers here:
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 4 years ago.
I have this three cols, the matter is that the second one has much more content than the others so its height is higher.
How it shoud be
That´s the result i have
The content is charge from other htmls.
In addittion i will have to make the divs drag & dropa so flexbox does not good for my problem.
$('.component-container').sortable({
cursor: 'move',
placeholder: 'ui-state-highlight',
start: function(e, ui) {
ui.placeholder.width(ui.item.find('.panel').width());
ui.placeholder.height(ui.item.find('.panel').height());
ui.placeholder.addClass(ui.item.attr("class"));
}
<div id="fila" class="row center" style="text-align: center;">
<div class="pan col-md-6 col-sm-12">
<div class="row">
<div class="pan col-md-12 col-sm-12 order-sm-first box" id="panel1">
</div>
</div>
<div class="row">
<div class="pan col-md-12 col-sm-12 box" id="panel3">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="pan col-md-12 col-sm-12 big-box" id="panel2">
</div>
</div>
</div>
EDIT
That's how I have my code now and I have two problems, in resposive it display different panel2 and panel3&panel1 because the lasts are in a row meanwhile the others aren't. The other problem is that drag and drop doesn´t work properlly.
Thanks a lot
Attached code-snippet shows a solution, using "CSS grid". You then control the margins in CSS by changing the margin values.
.wrapper {
display: grid;
grid-template-columns:
40%
1fr
;
grid-template-rows:
150px
150px
;
grid-template-areas:
"left-upper-box right-box"
"left-lower-box right-box"
;
}
.left-upper-box {
grid-area: left-upper-box;
background-color: grey;
margin: 15px 0px 15px 10px;
}
.left-lower-box {
grid-area: left-lower-box;
background-color: grey;
margin: 15px 0px 15px 10px;
}
.right-box {
grid-area: right-box;
background-color: grey;
margin: 15px 50px 15px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="left-upper-box"></div>
<div class="left-lower-box"></div>
<div class="right-box"></div>
</div>
</body>
</html>
Since I see you're using Bootstrap.
All you need to do is to have one two columns in one row.
Then in one column (left in your case) add two rows.
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-12 order-sm-first" id="panel1">
hello
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12 col-sm-12" id="panel2">
Hello
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
helllo
<br/>
<br/>
hello
</div>
</div>
</div>
You can see the output here
You can insert the first 2 boxes in one div and the bigger one in another div. That way you can achieve the layout you wanted. Try this code.
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 order-sm-first" id="panel1">
panel 1
</div>
<div class="col-md-12" id="panel2">
panel 2
</div>
</div>
</div>
<div class="col-md-6 col-sm-12"> panel 3 </div>
</div>
You need to insert your 2 left boxes in one "col-md-6" and 1 right box on one "col-md-6" then you set the height to all boxes
#left_panel,#right_panel{
border:2px solid red;
margin:30px 0;
}
#left_panel{
height: 200px;
}
#right_panel{
height: 430px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12 order-sm-first " id="left_panel">panel</div>
<div class="col-md-12 col-sm-12 " id="left_panel">panel</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12" id="right_panel">panel</div>
</div>
</div>
</body>
</html>
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12 order-sm-first " id="panel1">
</div>
<div class="col-md-12 col-sm-12" id="panel2">
</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
</div>
</div>
</div>
I've written a basic code like this for experimental purposes:
<!doctype html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.pos {
position: relative;
}
.well1, .well2 {
position: relative;
height: 380px;
}
</style>
</head>
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>
</html>
This is the output:
But the same layout doesn't appear in mobile screens.
How can I fix it?
In Bootstrap,the col-xx-x classes are relative to specifics media queries. So here, you'll have to had the class col-xs-6 if you want your 50% column to stay 50% when you are below 767px. Your markup should look like this :
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>