Arrange Bootstrap rows to display the bottom row first

Having trouble with maintaining image placement in bootstrap rows. I want to achieve a modern website design where images are positioned both right and left, but on smaller screens, the image should be at the top.

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

Currently facing this issue:

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

I considered using flexbox, but it lacks responsive rows required for fluid images.

<div class="container">
  <div class="row">

    <div class="col-md-7 col-sm-12 col-xs-12 ">

      // Text Data

    </div>

    <div class="col-md-5 col-sm-12 col-xs-12 ">

      <img class="img-fluid" src="url"></img>

    </div>

  </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Great job! The Bootstrap v4 grid system is capable of handling flex modifiers.

Check out this link for more information on flex order in Bootstrap v4

If you want to move content before text, you can use the flex-first modifier. You can also utilize breakpoints like flex-md-first.

<div class="container">
  <div class="row">
    <div class="col-md-7 col-sm-12 col-xs-12">
      // Text Data
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12 flex-md-first">
      <img class="img-fluid" src="url"></img>
    </div>
  </div>
</div>

Here's a Codepen example: https://codepen.io/sidhuko/pen/gxwprN

Answer №2

If you're looking to reverse the order of your columns in a col-xs-12 layout, here's a nifty little trick :). The text will appear below the image when the width reaches 767px or smaller.

@media (max-width: 767px) {

  .row.reorder-xs {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);

    direction: ltr;
  }

}
<div class="container">
  <div class="row reorder-xs">

    <div class="col-md-7 col-sm-12 col-xs-12 ">

      // Text Data

    </div>

    <div class="col-md-5 col-sm-12 col-xs-12">

      <img class="img-fluid" src="https://dummyimage.com/300"></img>

    </div>

  </div>
</div>

Answer №3

If my understanding is correct, please give this a try:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">

    <div class="col-md-7 col-md-push-5">

      // Text Data

    </div>

    <div class="col-md-5 col-md-pull-7">

      <img class="http://via.placeholder.com/350x150" src="url"></img>

    </div>

  </div>
</div>

Appreciate it.

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

The navigation bar is malfunctioning across multiple sections, including html, css, and js

The navigation bar on my website is giving me a headache. It works perfectly when the page is at the top (home section), but as soon as it scrolls down to another section, it stops working. I've tried multiple solutions, but none seem to do the trick. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Is there a way to create an interactive animation where an image responds to the movement of the mouse, but does not directly follow it

Looking to create an interactive experience where images on the webpage move in response to mouse movement. For example, if an image is at coordinates (0,0) and the mouse moves from (32,45) to (32,47), the image should shift vertically by 2 pixels. I atte ...

javascripthtml

Submitting Angular 4 Form Reset Sends Data to Server

I am facing an issue with my HTML form: <form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate> <div class="form-group col-xs-3" > <label for="powerPlan ...

htmlangulartypescriptangular2-formsforms

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

htmltypescriptdom

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

How to obtain the row identification number of a dynamically generated HTML table

Here is a function that dynamically creates a table with data and handles click operations. The goal is to retrieve the id of the row that the user clicks on, however, only the id of the last row is being returned. Various attempts have been made to addr ...

javajavascriptandroidhtml

Is there a glitch in Firefox with the :active pseudo class?

Check out this example here: https://codepen.io/anon/pen/zzrdmo I'm having trouble with the click effect using the :active pseudoclass on an icon inside a div in Firefox. When I click and then unclick the div, it stays clicked... If I remove the rel ...

htmlcssfirefoxeffect

Increase the width of the div towards the left to accommodate its contents

I have a structure of div: img { width: 25px; height: 25px; } <div id="container"> <span>Hello user</span> <span> <img src="https://en.opensuse.org/images/0/0b/Icon-user.png"> </span> ...

javascripthtmlcssfrontend

What is the best way to design this layout using HTML and CSS?

Can someone help me achieve this specific layout? / header width:100%, height: 100px (overlayed) / ///////////////////////////////////////////////////////////////////////////// / / ...

htmlcsslayout

create a layout with intersecting divs to display a table/chart

Lately, I have been pondering how to achieve a design similar to the one shown below. Specifically, I am interested in the "sparkline/area" chart that appears at the bottom of the table/divs. I can't seem to figure out how to code something like this ...

javascriptjqueryhtmlcss

gh-pages: Images that should not be cached

Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...

htmlgithubgithub-pages

iframe failing to load link after initial attempt

As a beginner in using iframes, I have come across an issue that is puzzling me. I have a navigation bar and an iframe on my webpage. When I click on the "Search" link, it loads into the iframe without any problems and I can work within it. However, if I c ...

phphtmlcss

Ways to eliminate gaps within CSS flex elements

I need help creating a table structure using CSS flexbox Check out my CodePen here for reference I have elements spaced using justify-content: space-between; in a container, but I want to remove the space between the divs so they sit next to each other. ...

cssflexbox

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

phpjavascriptjqueryhtmlcss

Choosing all the checkboxes in a table by row using Jquery

I need a script that can selectively check checkboxes inside each table row. The solution provided in the reference post checks all checkboxes inside the table, but I specifically want to target checkboxes row by row. Reference post: Jquery select all ch ...

jqueryhtmlcheckbox

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

htmlangulartypescript

Utilize jQuery to automatically generate a file path using the unique identifier of a link that is clicked by users

I am currently working on developing a system that dynamically generates paths to specific JSON files upon clicking various links. This is specifically for a restaurant menu display. The goal is to have the JSON data returned and parsed into HTML within a ...

javascriptjqueryhtmljson

What is the best approach for organizing a CSS grids template?

I am trying to utilize CSS grids to arrange the layout of this page as shown below: https://i.sstatic.net/x7epq.png While there are currently only 3 divs, I want to begin by figuring out how to position div 2 and div 3 on the second row in columns 2 and ...

javascriptcssreactjsflexboxcss-grid

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

phphtmlformsfirefoxcross-browser

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

phphtmlcsswordpresstwitter-bootstrap-3