Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates.

Type 1

<div class="row">
    <div class="col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>
    <div class="col-md-8">
      <p>stuff</p>
    </div>       
</div>

Type 2

<div class="row">
    <div class="col-md-8">
      <p>stuff</p>
    </div>
    <div class="col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>       
</div>

Some posts have content on the left, while others have it on the right, all stacked on top of each other.

For mobile devices, I want the col-md-4 to always appear under col-md-8. By default, Bootstrap places the second div below the first. This arrangement works well for type 2 versions, but I need it to be the same for type 1 versions too. (I still want col-md-8 on the left and col-md-4 on the right in type 1 versions on larger screens)

Answer №1

Reorganize your columns based on different screen sizes by using Bootstrap. If you want to make columns occupy full width and change their order for small screens, use the following code as a reference:

<div class="row">
    <div class="col-sm-12 col-sm-push-12 col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>
    <div class="col-sm-12 col-sm-pull-12 col-md-8">
      <p>stuff</p>
    </div>       
</div>

To learn more about column ordering with Bootstrap, visit: http://getbootstrap.com/css/#grid-column-ordering

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

I am interested in creating a similar layout using Bootstrap Studio

I've been attempting to align a text with borders and a button in one row, similar to the layout shown in this image, but I keep failing. I've experimented with different layouts such as two-column layout, one row, two-column layout, simple div, ...

Is there a way to retrieve the redirected URL from an AJAX request?

Hi everyone, I'm currently trying to solve a puzzle regarding how to identify whether a PHP script redirects during an AJAX call. Does anyone have insight into whether JQuery AJAX has the capability to detect and keep track of location changes? Let&a ...

Retrieving current element in AngularJS using jQuery

I have 4 templates, each with mouse actions that trigger functions: ng-mouseover="enableDragging()" ng-mouseleave="disableDragging()" Within these functions, I update scope variables and would like to add a class using jQuery without passing any paramete ...

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

What is the best way to prevent my form from saving empty values to the database?

I am currently working on a project for managing library resources using HTML5, PHP, and SQL. I have implemented form validation using PHP for fields such as email, password, name, surname, and phone number. The validation seems to work visually, but it st ...

Text in gray overlaying image background

I am attempting to design a layout that resembles the following: Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. Essentially, I want the backgrou ...

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

Extract information from various webpages with identical URLs

I am struggling to extract data from a specific webpage (). Even though I can successfully gather information from the initial page, whenever I attempt to navigate to subsequent pages, it continues to display the same dataset. It seems to retrieve the iden ...

How to position a div next to another div within Bootstrap columns

Can content be vertically aligned in a Bootstrap column to the content of another div? I have two adjacent columns, A and B. When an item in Column B is clicked, a list of words appears in column A. I want the collection of words in A to be vertically cen ...

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

python conducting automation tests with Selenium WebDriver on a mouse

Hello, I'm having trouble with opening the Mouser website and using the search bar to send some data. Below is a sample of the code I've been working on, but I can't seem to find the correct CSS selector. Any help would be greatly appreciate ...

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

Design a visually stunning image grid with the use of Bootstrap 4

I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below: https://i.sstatic.net/azsxa.jpg The issue I am facing is aligning the right margin (red line), as illustrated below: https://i.sstatic. ...

Prevent the footer from overlapping with the text when printing several pages

Is there a way to prevent text from overlapping the footer when printing a page containing both? I have tried using CSS and HTML to adjust the positioning of the footer, but it still overlaps with long blocks of text. Any suggestions on how to fix this i ...

Guidelines for calculating the CRC of binary data using JQuery, javascript, and HTML5

Can you please assist me with the following issue? Issue: I am currently reading file content using the HTML5 FileReaderAPI's ReadAsArrayBuffer function. After storing this buffer in a variable, I now need to compute the CRC (Cyclic Redundancy Check) ...

Angular renders HTML files differently than web API responses

Having trouble displaying the content of an HTML file in a DIV - it works with a static file but fails with a dynamic file. Success with Static File: I had an EML file that I suspected needed parsing. By renaming the file extension to HTML, it rendered d ...

What is the best way to horizontally align a button with CSS?

I need help with positioning a button on my web page. The button looks great, but it's currently off to the left and I want it centered below the main text. Any suggestions on how to achieve this? <!DOCTYPE html> <html lang=""> <head& ...

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

Update a section of the JSP page that includes a dojo tabbed panel within a DIV

I created a jsp file that includes a tabbed panel using the Dojo framework. Here is the code snippet from the JSP - <div id="protoDevTDPRevLogTab"> <sx:tabbedpanel id="tabContainer" selectedTab="2" > <sx:div label="Prototype Dev ...