Creating alternating columns in Bootstrap 4: A simple guide

I need to create a section that displays an image on the left and text on the right, followed by the opposite layout in the next column. Here is my current HTML structure:

<section>
        <div class="container">
            <div class="row no-gutters">
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
            </div>
        </div>
    </section>

While this setup works fine on desktop, I am facing issues on mobile devices where I want the image to appear first, followed by the text in each case. How can I resolve this?

csstwitter-bootstrapmobilegridbootstrap-4

Answer №1

Utilize flexbox order utility classes for optimal layout control. Learn more about Flexbox Order Bootstrap

Expand the snippet in full screen mode.

Integrate order-2 order-md-1 to the text and order-1 order-md-2 to the image. Furthermore, encase the text and image within a div with the class row for proper functioning.

The use of order-2 order-md-1 denotes that starting from smaller devices, set the item order to 2, and on medium-sized screens and beyond, switch it to order 1

Note: You can also apply align-items-center to the row to center items vertically

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 ">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 ">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
  </div>
</section>

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

Creating a series of adjacent dropdown menus with JavaScript, HTML, and CSS

I am encountering an issue while attempting to place multiple dropdown menus next to each other. I have included two categories as dropdown options in the header, but I am facing difficulty with one of them not functioning correctly. When I click on the no ...

javascripthtmlcss

Using clearfix on every div element is essential to avoid container collapsing

Would it be beneficial to include clearfix in every div element to avoid container collapse issues? Or is it more practical to apply it only to specific classes, like so? <div class="container"> Additional div elements... </div> .containe ...

htmlcss

What is the best way to eliminate the white margin that is showing up on the right side of my website?

Here's a question that has been bugging me recently... So, I've been working on creating my own version of an Airbnb website called 'tombnb' for a few weeks now. Everything was going smoothly until I encountered a persistent issue. Th ...

htmlcss

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

Show or conceal a bootstrap spinner using a function

Quandary I am facing an issue with displaying a bootstrap spinner while a function is running. The spinner should be visible during the execution of the function and disappear once it is done. Here is the code for the bootstrap element: <div id="res ...

javascripthtmlcssbootstrap-5

Leaflet map displaying accurate position only upon browser resize

Let me start by showing you a screenshot of the issue I am facing. Check it out here The screenshot clearly shows a gap between my expandable left navbar and the left border of the map image. However, when I resize the browser window by dragging and drop ...

javascripthtmljquerycssbootstrap-5

One-of-a-kind Version: "Utilizing CSS to Capitalize an

Imagine having the following strings. i and we. me and you. he and she. Is it possible to achieve the desired result using PURE CSS? I and We. Me and You. He and She. If capitalizing the text using text-transform: capitalize is used, it will yi ...

jqueryhtmlcss

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

javascripthtmlcss

Move a sub-division horizontally within a parent element that has a full width of 100%

I am currently incorporating some jQuery features into my website. The concept involves expanding the parent div to 100% width for responsive design as you scroll down the page, which works perfectly. Simultaneously, I aim to translateX the child div so th ...

jquerycssanimation

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner: <p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeigh ...

htmlcssangularprimeng

The beginning of my HTML input is not at the top of the page

I have a query regarding the custom input line I created recently. When I adjust the height of the input, instead of aligning with the top, the text appears vertically centered. Moreover, the text does not wrap to a new line once it reaches the outermost ...

htmlcss

Restrict the dimensions of a div positioned between two navigation bars

Having an issue with the development of a web app using Angular and Bootstrap 4.0.0 CSS framework. The goal is to have the app fit the screen size without any scrollbars. <nav class="navbar fixed-top navbar-expand navbar-dark"> Upper navBar ...

htmlcssangulartwitter-bootstrapbootstrap-4

Merging Fewer with Visual Studio 2012

Combining all Less files into a single stylesheet? After following the instructions in the above link, I have successfully merged my Less files together for easier CSS reading during development. However, I would like to ensure that end users only need to ...

cssvisual-studio-2012lessweb-essentials

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search ...

javascripthtmlcssangularjsflickr

Tips for designing resizable overlay divs

Looking to design an image with an overlay gradient and text, similar to this: <div> <img src="url"/> <div background-image="other url" background-repeat:repeat-x;> <h2>some text</h2> </div> </div> Some impor ...

jqueryhtmlcss

What is the process for setting up both an open and closed status for my accordion?

After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...

javascriptjquerycss

100% Footer Visibility on iPad

Seeking assistance as I am facing an issue with my Joomla website. The footer width is not extending to 100% on an iPad, it seems stuck at the footer content limit. Can anyone help me by providing the correct CSS code? The website in question is: www.webk ...

cssipadfooter

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

htmlcssdjango

Tips for capturing power off events in a Symbian console application

Seeking assistance with implementing code for Symbian S60 5th edition that allows a console application to detect power off events (phone switch off). While I have experience with handling this in UI applications [AppUI, HandleSystemEventL(const TWsEvent&a ...

c++mobilesymbians60