Arranging rows and columns in Bootstrap 3 for small screens

My layout is structured as follows:

<div class="container">
    <div class="row">
        <div class="col-md-8>
            <div class="row">
                <div class="col-md-12">
                    box 1
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    box 2
                </div>
            </div>
        </div>
        <div class="col-md-4">
            box 3 
        </div>
    </div>
</div>

Can Bootstrap help me rearrange the order for small screens to display like this?

|box1|

|box3|

|box2|

I'm stuck trying to swap rows in this sequence. Any assistance would be greatly appreciated.

csstwitter-bootstrap

Answer №1

Instead of placing the box column in a separate row, you can keep all the box columns in the same row. You can control the order of the columns in bootstrap by using the col-sm-push-* or col-sm-pull-* utility classes.

See a demo here

Sample HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="content">
        <h1>Column 1</h1>
      </div>
    </div>
    <div class="col-sm-4 col-sm-push-4">
      <div class="content">
        <h1>Column 3</h1>
      </div>
    </div>
    <div class="col-sm-4 col-sm-pull-4">
      <div class="content">
        <h1>Column 2</h1>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Recently, I added an 'onclick' event to every row of an asp gridview and the popup window that appears is functioning perfectly. Now, I'm interested in adding a transparency level to the body of the popup window for a translucent effect. Can ...

javascriptc#cssasp.netgridview

How to Achieve a Fixed Bottom Footer in Ember Framework

Hello, I am working on an Ember application and trying to implement a Sticky Footer feature. I followed a tutorial on Sticky Footer On CSS-Tricks which worked for me previously, but it seems to not work with Ember. Here is my CSS code: .mainFooter { ...

cssember.js

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

javascriptcssreactjs

When the CKEDITOR is set to fullPage mode, it cannot properly apply styles from an external stylesheet that is configured in the config.contentscss setting

To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows: config.extraPlugins = 'stylesheetparser'; config.contentsCss = '/css/externalStyleSheet.css'; config.stylesSet = [ { ...

cssiframeckeditorckeditor4.x

Columns filled with fluid content along with one column set to a maximum width

Currently, I am attempting to create a two-column layout with specific dimensions for each column. The first column should have a maximum width of 200px while the second column expands to fill the remaining space. Despite trying out multiple examples, I h ...

cssfluid

What is the best way to create a shape using CSS?

In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...

htmlcss

Text centered vertically with jQuery is only loaded after the page is resized

My jQuery script is designed to vertically center text next to an image, but it seems to only work properly after resizing the page. $(window).load(function () { $(function () { var adjustHeight = function () { $('.vertical-al ...

javascriptjqueryhtmlcssruby-on-rails

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

Text Alignment in a Responsive Design

Is there a way to create a responsive container that automatically centers all items inside it on the page, regardless of the screen size? Thanks :) Images are not included in this code snippet, but here's the code: HTML <!DOCTYPE html> <h ...

htmlcss

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

htmlcssiframeflexbox

Ways to modify the background images in doxygen

Currently, I am facing a challenge while customizing Doxygen's output and my main roadblock is the menu bar. To address this issue, I decided to generate custom CSS and HTML files provided by Doxygen by executing the command: doxygen -w html header. ...

htmlcssdocumentationdoxygen

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

Working with Python and BeautifulSoup to retrieve <td> elements in a table without specified IDs or classes on HTML/CSS documents

While utilizing Selenium, Python, and Beautiful Soup to scrape a web page, I encountered the challenge of outputting table rows as comma-separated values due to the messy structure of the HTML. Despite successfully extracting two columns using their elemen ...

pythonhtmlcssseleniumbeautifulsoup

Generate responsive elements using Bootstrap dynamically

I'm having success dynamically generating bootstrap elements in my project, except for creating a drop-down menu. ColdFusion is the language I am using to implement these div elements: <div class="panel panel-primary"><div class="panel-head ...

javascriptjqueryhtmltwitter-bootstrap

Type of element returned

Is there a way to retrieve the element type? I'm interested in applying the style of a class to HTML5 elements without using the class attribute. <!DOCTYPE> <html> <head> <title>My page</title> </head& ...

javascriptjquerycsshtml

Manipulate CSS using jQuery's ID selector

I am attempting to modify a particular style of a div by its unique id, but it appears that my code is not functioning properly. The relevant codes are provided below: Jquery: $(document).ready(function () { $(".a_10.08.201223:56:49").hover(function(){ ...

jquerycss

Utilizing Bootstrap divs for multiline display in Yii2 platform

Currently, I am utilizing a list in Bootstrap CSS which is responsive and beneficial. However, I am faced with the challenge of creating a notification list with lengthy text akin to that on Facebook. My query pertains to the technique required to make th ...

jqueryhtmlcsstwitter-bootstrap

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue. I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperl ...

htmlcsshyperlinkcss-selectors