Need help changing order of boxes when screen resized - html

I am using Twitter Bootstrap to make a new website. I am having an issue with the responsive side to this.
You can view my current site now: http://www.monroeorm.com/SNOA/
When you resize the page the sidebars and primary content boxes aren't in the order I need them in. When I resize the page, such as on mobile, sidebar1 shows up before the primary content. I am trying to make it display after the content once the site is resized or viewed in mobile.
Here's what I've got so far:
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar1</h3>
</div>
<div class="panel-body">
Sidebar1
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Primary Content</h3>
</div>
<div class="panel-body">
Primary Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar2</h3>
</div>
<div class="panel-body">
Sidebar2
</div>
</div>
</div>
</div>
</div>
CSS:
http://www.monroeorm.com/SNOA/css/bootstrap.css
I'm probably making this harder than it seems - is there any way to get this achieved?


Is missing "col-sm-12 col-xs-12" on declaration >> http://leoncio.me/dev/stack/20338694.html
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar1</h3>
</div>
<div class="panel-body">
Sidebar1
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Primary Content</h3>
</div>
<div class="panel-body">
Primary Content
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar2</h3>
</div>
<div class="panel-body">
Sidebar2
</div>
</div>
</div>
</div>
</div>


You could use flexbox and then add a media query to reorder the divs when the browser width is a certain size.

Related

Twitter Bootstrap grid layout

I'm guite new to bootstrap and I'm trying to create a bootstrap grip that should look something like this:
Is it possible to have the blue primary box in the same grid as the rest, but only using the HTML tags? Or do I have to create my own CSS rules to achive this?
I have tried nesting the rows etc. But so far, I have not been able to achieve a good looking result.
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>

You can do this, but you have to use Flexbox to get right panel same height as left side panels
Fiddle
#media(min-width: 992px) {
.content {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.right .panel {
display: flex;
flex-direction: column;
flex: 1;
}
.right .panel .panel-body {
flex: 1;
}
}
<div class="content">
<div class="col-md-9 left">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right">
<div class="panel panel-info">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>

Use panel-primary class of bootstrap instead of panel-default
Also you should use col-md-3 to fix this panel on right side
for example
<div class="row">
<div class="col-md-9">
<!--something here-->
</div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Panel 1</div>
<div class="panel-body">Content Body</div>
</div>
</div>
</div>
See official doc for other informations

Yes, it's possible. You should start by creating one row with two columns. The first column will have 3 rows inside it and then more columns inside. Keep in mind the grid layout works from 1-12, so if your left part has a size of 9 then your panel on the right should take the remaining 3 for its column size.
It goes something like this:
<div class="row">
<div class "col-md-9">
<div class="row">
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
<div class="row">
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
<div class="row">
<div class "col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
</div>
<div class="col-md-3">
*insert panel here*
</div>
</div>

When using Bootstrap Grid It should as simple as to add style="float: right;" to the
<div class="container">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-3" style="float:right;">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body" style="height: 300px;">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>

You will need to add two columns, then place the panels within these columns. The first columns' sizing will be 9 and 3.
The "Standard" panels will go inside the first column and the "Blue" panel will go into the second panel.
<div class="col-md-3">
// Standard panels.
<div class="col-md-9">
// First row.
<div class="col-md-12">
// Wide panel
</div>
// Second row.
<div class="col-md-4">
// smaller panel
</div>
<div class="col-md-4">
// smaller panel
</div>
<div class="col-md-4">
// smaller panel
</div>
</div>
// Blue panel
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
Inside the first column, the standard panels have been sized as 12 for the full width panel and 4 for each of the smaller panels. This is because the sizing is relative to the parent. The parent column has a width of 9 and so the child column sizing will be sized in 12th's of that 9. Hope this makes sense.

Bootstrap grid system col of two high

How would one achieve the setup shown in this image using the Bootstrap grid system? The green rectangles represent Bootstrap panels and the orange rectangle represents a Bootstrap Jumbotron.
(Don't bother the text in the image)
This is the code I have at the moment (the %%%CONTENT%%% are being replaced with PHP so don't bother them):
<div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
<div class="container">
<h1>%%%JUMBOTRON%%%</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
</div>
</div>

your structure should be:
-Nav
-Jumbotron
-Row separated in 2 halfs
-The second half contains 2 rows of full width
something simmilar to this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- ... rest of your nav configuration -->
</nav>
<div class="jumbotron">
<div class="container">
<h1>Jumbo!</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
left side
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
right side 1
</div>
</div>
<div class="row">
<div class="col-md-12">
right side 2
</div>
</div>
</div>
</div>
</div>

Here is an example using Panels as described in the original question:
<div class="row">
<div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
<div class="container">
<h1>%%%JUMBOTRON%%%</h1>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-6"><!--Column Left-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%<br/>Note: The height of this panel is independent of the others<br/>You could set the height using CSS if needed.</div>
</div>
</div>
</div><!--End Column Left-->
<div class="col-md-6"><!--Column Right-->
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%</div>
</div>
</div>
</div><!--End Column Right-->
</div><!--End Container-->
</div><!--End Row-->

Set same panel height from another panel height

I have defined two panels each one inside a col-md-6 class like this. One of the panels will contain a map from google maps API, while the second panel has information about the map in a table. I want the first panel to have the same height of the second panel, because the map size I am using is fixed (e.g 250px), otherwise the map has height 0. My panels look like this:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
<div id="map" style="width: 100%;height: 250px"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
A table
</div>
</div>
</div>
</div>

You can use jQuery for this:
HTML:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
<div id="map"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
A table with content
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var panelHeight = $('.panel-info .panel-body').height();
$('#map').css('height', panelHeight);
});
$(window).resize(function () {
var panelHeight = $('.panel-info .panel-body').height();
$('#map').css('height', panelHeight);
});

Move Bootstrap 3rd column to top of row after responding to breakpoint

I have this 3-column row in Bootstrap that looks like this:
At some break point, it flips vertical and becomes ordered top to bottom with the ABC list showing last as expected. I would like to know if there's a feature (like a data attribute) of Bootstrap that will move the ABC list of the third column to the vertical top of the row.. maybe an index or something implemented by Bootstrap. If not, this is the HTML snippet in question - is the same result achievable with CSS?
<div class="row">
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="list-group col-md-4">
A
B
C
</div>
</div>

You can use .col-md-push-* and .col-md-pull-* to reorder your columns.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="list-group">
A
B
C
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
JSFiddle
Bootstrap link: Column ordering

Change column ordering from mobile to desktop layouts

I'm trying to implement below designs using grid layout:
This is what i tried but not what i wanted.
http://jsfiddle.net/tomalex0/3fesK/3/
<div>
<div class="col-md-9 col-md-push-3 row-one">1</div>
<div class="col-md-3 col-md-pull-9 row-two">2</div>
<div class="col-md-9 col-md-push-3 row-three">3</div>
</div>
I don't want to use absolute to make it work, as the footer comes under the absolute div.
Please let me know if its possible.

<div>
<div class="col-xs-12 col-sm-9 pull-right">1</div>
<div class="col-xs-12 col-sm-3 pull-left">2</div>
<div class="col-xs-12 col-sm-9 pull-right">3</div>
</div>
http://jsfiddle.net/isherwood/28RsL/

Here is a bootply demonstrating most of your solution. You will need to include cases for other viewports to make this work on all of them, but most of it is done for you. What I did was make multiple containers named 2 to build the desktop layout, and hide it for the mobile layout and vice versa.
<div class="container">
<div class="row">
<div class="col-md-4 hidden-sm">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">2</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">1</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-sm-12 hidden-lg">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">2</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-8 col-md-offset-4 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">3</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>