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

What is the best way to enlarge the image to a specific percentage?

Having trouble displaying Json data on an HTML page?

How to save HTML content in a variable for future use in Next.js

Trying to configure and use two joysticks at the same time using touch events

Issue with responsive design: Media queries not applying max-width

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

When the mouse is clicked, the character fails to reach the intended destination or moves in the wrong direction on the HTML canvas

Text area with a set height and expandable max-height - scrollable overflow

constant element within mat-menu in Angular

Adjusting the Underline Navigation Effect with jQuery

Tips for adjusting div content to fit a fixed height on all devices

Managing traffic in Google Kubernetes Engine (GKE)

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

Transferring information from template to associated component

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

Displaying an error or success message upon submitting a form is currently not functioning as