Arranging Content with Bootstrap Columns

Question

Arranging Content with Bootstrap Columns

I am trying to organize my content into three sections as follows:

A - main content of page
B - very important content (must be visible without scrolling)
C - less important content.

The current layout I have is like this:

-----
|A|B|
|A|C|
-----

However, when the viewport width is reduced, it changes to:

---
|A|
|B|
|C|
---

resulting in B not being visible on the screen.

I have managed to change it to:

---
|B|
|C|    
|A|
---

What I really need is:

---
|B|
|A|
|C|
---

Is there a way to achieve this using bootstrap or any other method?

html css twitter-bootstrap

Answer 1

Answer №1

That's an interesting question that can be solved by using float:right; on column B and C to ensure the responsive behavior.

For a demonstration, you can check out this example: http://codepen.io/belens/pen/uvdkp

Here is the code snippet:

<div class="container">
  <div class="row">
    <div class="col-b col-sm-6">B</div>
    <div class="col-a col-sm-6">A</div> 
    <div class="col-c col-sm-6">C</div>
  </div>
</div>

And the corresponding CSS:

[class*="col"] {
  text-align: center;
  height: 100px;
  line-height: 100px;
  vertical-align: middle;
  background-color: #ccc;
}

.col-a {
  height: 200px;
  background-color: SteelBlue;
}

@media (min-width: 768px) {
  .col-c, .col-b {
    float: right;
  }
}

In the given example, the B column will be displayed before the others as per my assumption of your preference for B being first.

Answer 2

That's an interesting question that can be solved by using float:right; on column B and C to ensure the responsive behavior.

For a demonstration, you can check out this example: http://codepen.io/belens/pen/uvdkp

Here is the code snippet:

<div class="container">
  <div class="row">
    <div class="col-b col-sm-6">B</div>
    <div class="col-a col-sm-6">A</div> 
    <div class="col-c col-sm-6">C</div>
  </div>
</div>

And the corresponding CSS:

[class*="col"] {
  text-align: center;
  height: 100px;
  line-height: 100px;
  vertical-align: middle;
  background-color: #ccc;
}

.col-a {
  height: 200px;
  background-color: SteelBlue;
}

@media (min-width: 768px) {
  .col-c, .col-b {
    float: right;
  }
}

In the given example, the B column will be displayed before the others as per my assumption of your preference for B being first.

Arranging Content with Bootstrap Columns

Answer №1

Similar questions

Create a stylish navigation dropdown with MaterializeCSS

Struggling to figure out the correct method for aligning calendar using bootstrap-datetimepicker?

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

Achieve perfect vertical alignment for a set of three identical boxes using CSS media queries

What is the best way to swap the values of options between two input select elements?

Getting the value of radio button groups in C# - A complete guide

Parsing HTML code using PHP's DOM parser for iteration

Stop images from being stored in the database instead of text characters

Utilizing Android's advanced feature of overlapping buttons to create multiple states

(Reactjs) Steps to automate submission of file upon selection

Centering items within grid columns for optimal alignment

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

Different option for positioning elements in CSS besides using the float

Remove a div element with Javascript when a button is clicked

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Sudden slowdown due to Jquery error

jQuery: Select the parent element of a focused form input and apply styling

Is it possible to employ the columns tag within an HTML email design?

Different ways to modify the style of a MenuItem component in PrimeNG

Capture a screenshot of the icons