Is there a way to reorganize the image/text grid using a media query?

In my grid, each row contains text in one column and an image in the other. The order of these columns is determined by the user in a CMS and can vary for each row.

https://i.sstatic.net/MwR5O.png

On mobile devices, I always want the image to appear above the text. How can I adjust the grid layout using a media query to achieve this?

I have a fiddle here demonstrating the desktop layout, but I am unsure how to implement the necessary changes for the image to be displayed on top in mobile view. I believe flexbox might offer a solution. Any guidance would be appreciated!

https://jsfiddle.net/3opref6L/

The length of the rendered code may vary as it is generated by the CMS. Here is an example:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="block htmlblock">
                <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="block image-block">
                <img src="https://dummyimage.com/600x400/000/fff">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="block image-block">
                <img src="https://dummyimage.com/600x400/000/fff">
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="block htmlblock">
                <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="block htmlblock">
                <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="block image-block">
                <img src="https://dummyimage.com/600x400/000/fff">
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-4flexbox

Answer №1

Introducing a cutting-edge SOLUTION UTILIZING flexbox IN CONJUNCTION WITH Bootstrap and 

Designed to be adaptable for varying row quantities
. Given that Bootstrap is built on Flexbox principles itself, this approach proved effective for our needs.

LATEST UPDATE: Implemented some adjustments to counteract bootstrap-specific CSS conflicts:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

@media (max-width: 768px) {
  .container .row {
    display: flex;
    flex-direction: column;
  }
  .container .row:nth-child(2n-1) .col:first-child {
    order: 2;
  }

  .container .row:nth-child(2n-1) .col:last-child {
    order: 1;
  }
}

@media (min-width: 769px) {
  .container .row {
    display: flex;
    flex-direction: row !important;
  }

  .container .row .col:first-child {
    order: 1;
  }

  .container .row .col:last-child {
    order: 2;
  }
}

/* Bug Fix */
@media (min-width: 576px) {
  .col-sm-12 {
    flex: 0 0 50% !important;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./OrderIssue.css" />
  </head>
  <body>
    ... Body content continues ...
  </body>
</html>

Issue resolved successfully.

Answer №2

When implementing Bootstrap 4, the grid systems utilize Flexbox for layout. One standout feature of Flexbox is its flexibility in setting the direction of elements. By utilizing flex-direction with options like row-reverse, you can easily solve layout challenges.

Answer №4

I am looking to implement a new class that mimics the functionality of the flex-row-reverse class within the existing row class. It achieves the desired outcome seamlessly.

Here is a concise code snippet to illustrate my point:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row mb-5">
      <div class="col-md-4 col-sm-12">
        <img src="https://dummyimage.com/200x200/000/fff">
      </div>
      <div class="col-md-8 col-sm-12">
        <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
    <div class="row mb-5 flex-row-reverse">
      <div class="col-md-4 col-sm-12">
        <img src="https://dummyimage.com/200x200/000/fff">
      </div>
      <div class="col-md-8 col-sm-12">
        <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-md-4 col-sm-12">
        <img src="https://dummyimage.com/200x200/000/fff">
      </div>
      <div class="col-md-8 col-sm-12">
        <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
    <div class="row mb-5 flex-row-reverse">
      <div class="col-md-4 col-sm-12">
        <img src="https://dummyimage.com/200x200/000/fff">
      </div>
      <div class="col-md-8 col-sm-12">
        <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
  </div>
</body>

</html>

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

What is the best way to show the current value of a checkbox element in the future?

I want to add multiple checkboxes using this method: $(".btn-sample").on("click", function() { $(".container").append( '<input class="check-sample" type="checkbox" value="'+check_value+'"/>' ); }); The issue I' ...

javascriptjqueryhtmldomcheckbox

A guide on embedding text onto the bottom of an image in Material-UI GridList using Reactjs

I'm currently developing a Mern-stack application and using Material-UI for the frontend. My GridList is functioning correctly, but I want to position my description text at the bottom of the image rather than in front of it. However, when I try to a ...

cssreactjsflexboxmaterial-uicodesandbox

What might be causing my checkboxes to become misaligned when viewed on mobile devices?

I am facing an issue with the layout of my checkboxes. They are coded as follows: <form> <div class="form-group"> <div class="row"> <div class="form-check"> <input type="checkbox" class="f ...

jquerytwitter-bootstrapcheckboxbootstrap-4

Restoring a navigation bar to its original state once scrolling back to the top of the page

Currently, I am expanding my knowledge of javascript and jQuery. While working on a project website, I decided to enhance the navigation by making it smaller and transparent as users scroll through the page. This is the code snippet that I implemented: $( ...

javascriptjquerycss

Creating a Venn diagram in an .html file with Flask: A tutorial

I am looking to display a Venn diagram on my HTML page using the return render function in Flask. Despite making several attempts, I have been unsuccessful so far. While matplotlib allows me to plot other types of graphs, I haven't discovered a metho ...

pythonhtmlpython-3.xflaskvenn-diagram

Transferring data between Javascript and PHP with AJAX and JQuery

I'm currently working on a basic web page that involves sending data from an HTML page to a PHP script and receiving some data back. My approach involves using AJAX, but for some reason, the PHP script doesn't seem to execute at all. Here's ...

javascriptphpjqueryhtmlajax

Display the hidden div element when clicked

In my code, I have two div elements as follows: <div class='staticMap'></div> <div class='geolocation-common-map'></div> Initially, the 'geolocation-common-map' div is removed using jQuery when the pa ...

javascriptjqueryhtml

Submitting a form with multiple actions using Ajax

Is it possible to submit data from multiple forms on the same page to different API tables using AJAX for each form? I have one form that needs to write to one table and another form that needs to write to a different table. How can I achieve this with o ...

jqueryhtmlajaxformsform-submit

Adjust speed on various HTML5 video players

I'm looking to slow down all the HTML5 video players on my page to 0.5x speed. Currently, I have a JavaScript snippet that only affects one video player at a time. <script type="text/javascript"> /* play video twice as fast */ document.quer ...

javascripthtmlvideohtml5-videoplayback

What is the best way to select the second HTML element identical to the first element using Selenium and Python?

Is there a way to click on a specific instance of a button that appears multiple times on a website? For example, how can I click on the second button and not the first one? Below is the code for the button I am trying to target: <a href="/us/en/outlet ...

pythonhtmlselenium

Utilizing VueJS to choose an item from a list and exhibit it using a function

My goal is to retrieve the element I click on, displayed in a list, and then print this element using a method within my Vue instance through the mail-list tag in index.html. I have a Vue component that iterates over a JSON object and only displays two at ...

javascripthtmlvue.jsemitvue-props

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

css

The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...

csshtml

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option

I'm currently facing an issue with a section of my form. I can't seem to figure out what's causing the problem, so I've decided to reach out here for some guidance. The code I've written aims to determine both the gender and sexua ...

phpmysqlhtml

Although the xpath simulates a click on the button, it does not actually perform any action

I've been diligently working on an automation test suite for a web application that can be quite temperamental. Following a recent UI update, I decided to run some tests to ensure the GUI, buttons, and xpaths were functioning as expected. The night b ...

javascriptjavahtmlseleniumxpath

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

javascriptpythoncssseleniumselenium-webdriver

Add HTML content to a specific div according to the option selected in a drop-down menu

I am currently working on a project where I need a button to insert HTML content into a div based on the value selected in a select box. However, the functionality is not working as intended. Upon clicking the button, nothing happens. I am unsure of what t ...

javascripthtmlinnerhtml

Having trouble with a basic jQuery selector not functioning as expected

Having trouble parsing this HTML code: <tr id="a"> <td class="classA"> <span class="classB">Toronto</span> </td> <td class="classC"> <span class="classD">Winnipeg</span> </ ...

javascriptjqueryhtmljquery-selectors

Exploring Google Go Templates for Creating Dynamic Websites using Multidimensional Arrays

In my struct example, I have a two-dimensional array: type Foo struct{ testArray[9][9] int } My goal is to access it using a template. For instance: tmpl.Execute(w, foo) //foo is a pointer to Foo struct and w represents the parsed html website How can ...

htmlarraystemplatesgo

What is the process for inserting a custom image onto a button that redirects to a different website using HTML and CSS?

Looking to make a button that directs to a different website with a custom image. Would it be better to use the <input> tag or the <button> tag? Appreciate any insight! ...

htmlcssimagebutton