Arrangement of elements using Bootstrap's order and column classes beneath

I'm having trouble with a bootstrap layout.

Here is the layout I need to achieve on different screen sizes:

On mobile, I want: Title Image Text

And on desktop, I want: Image Title Text

However, the title div always takes up the image height, making it impossible to position the text below it. Any help would be greatly appreciated! Thank you!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-5 order-lg-2">
            <h2>Title</h2>
        </div>
        <div class="col-lg-7 order-lg-1">
            <img src="https://lorempixel.com/400/200" lass="img-fluid" alt=""/>
        </div>
        <div class="col-lg-5 order-lg-3">
            <h3>Cyprum itidem insulam</h3>
            <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p>
        </div>
    </div>
</div>

htmlcssflexboxtwitter-bootstrap-4

Answer №1

I came across this solution that utilizes the Bootstrap class. Give it a try if you're interested. I'll emphasize once again, Order 3 is important here. Take a look at the code snippet below.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row justify-content-end">
        <div class="col-12">
          <div class="row flex-lg-row-reverse">
            <div class="col-12 col-lg-5 order-lg-2">
                <h2>Title</h2>
                <div class="row hidden-lg-down">
                  <div class="col-12 order-lg-3">
                      <h3>Cyprum itidem insulam</h3>
                      <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p>
                  </div>
                </div>
            </div>
            <div class="col-12 col-lg-7 order-lg-1">
                <img src="https://lorempixel.com/400/200" lass="img-fluid" alt=""/>
            </div>
          </div>
        </div>
        <div class="col-12 hidden-lg-up order-lg-3">
            <h3>Cyprum itidem insulam</h3>
            <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p>
        </div>
    </div>
</div>

Note: Make sure to view this snippet in full width for optimal display.

Answer №2

Utilize the offset classes available in Bootstrap for layout alignment.

For instance, you can apply the classes offset-0 offset-lg-5.

Refer to the documentation here for more information.

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

When editing html files in Vim, the javascript indent filetype plugin is sourced unexpectedly

After experimenting with my vim settings, I noticed an unexpected behavior. When editing html files in vim, both the indent/javascript.vim and indent/html.vim filetype plugins seem to be sourced simultaneously. Is this intentional or a bug? How can I ensur ...

htmlvimindentationvim-pluginneovim

jQuery providing incorrect measurements for an element's height

I am encountering an issue with obtaining the height of the #header element in my AngularJS application. Despite using jQuery, the returned height seems to be incorrect. The current code snippet looks like this: $(document).ready(function() { function ...

javascriptjqueryhtmlangularjs

Bootstrap columns stacking in a disorganized manner

I'm struggling to correctly stack my columns using bootstrap. The image shows that I need the black box to be positioned below the green box, but I can't seem to get it right: https://i.sstatic.net/7bvN6.png This is the code I have been using: ...

csstwitter-bootstrapbootstrap-4

Delete the span element if the password requirements are satisfied

I am implementing password rules using span elements. I aim to dynamically remove each span that displays a rule once the input conditions are met. Currently, I have succeeded in removing the span related to the minimum length requirement but I am unsure h ...

javascripthtmlangularjsregex

How to remove the scrollbar from the main div in a Bootstrap layout

Currently, I am in the process of creating a registration page using HTML, CSS, and Bootstrap5. I have a couple of questions: Within my code, there is a fixed height for the footer set at 55px. I am uncertain if this is considered good practice because ...

htmlcssbootstrap-5

What is the best way to remove the default outline in the <img> tag?

<img class="image_cover" src = "" /> .image_cover { width:25px; height:25px; border-style:none; border: 0; box-shadow:none; } Showing an example in a live demo on jsfiddle Encountering an issue in Chrome Version 33.0.1750.152, ...

htmlcss

Guide to effectively retrieving data from S3 and displaying a view at regular intervals of 4 seconds

In my current project, I am working on fetching a file from S3 and utilizing the data within that file to generate a map on a webpage. To achieve this task, I have set up an Express server along with the EJS templating engine for serving and rendering the ...

javascripthtmlexpressleaflet

Tips for displaying user data from a mongodb database on a webpage, making edits to the information, and then saving the updated data

I have a website where users can register, log in, and update their profile information. However, I am facing an issue where only the data of the first user in the database table is being retrieved. How can I get the data of the currently logged-in user? ...

javascripthtmlnode.jsajaxmongodb

Discover the following input

Can someone assist me? I am looking for a way to automatically move the cursor to the next input field after filling out the first one. Here is the code snippet I have been working with: jQuery: $('input').keyup(function(){ if($(this).val().m ...

jqueryhtmlhtml-lists

Obtaining the current index in a list of strings using the map() function

Here is the code snippet I am working with: {words.map((word: string, index) => ( <Span key={index}> <Span> {word} </Span> </Span> ))} Currently, this code displays dif ...

javascripthtmlcssreactjs

Tips for modifying Capybara selectors on a website with css-modules

When writing our automated tests, a typical line of code we use looks like this: find('.edit-icon').click As we move towards incorporating css-modules in our project, I've been informed that class names could undergo significant changes. A ...

cssseleniumrspeccapybaracss-modules

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local ...

javascriptcssimagesettimeoutopacity

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for enabling scrolling on the correct floating menu when there is overflow

I have been attempting to make the right floating menu scroll when overflowing, but so far, I have been unsuccessful. Here is the link to the JSFiddle demonstrating the issue: https://jsfiddle.net/xuwtqmj3/. .menu { position: fixed; float: right; ...

htmlcss

Leveraging vuetify to customize layouts based on varying screen dimensions

I am currently working on a Vue.js application and utilizing Vuetify. My table layout initially appears as shown below: https://i.stack.imgur.com/EocMn.png However, when I reduce the viewport width, the layout ends up looking like this: https://i.stack. ...

vue.jslayoutflexboxvuetify.js

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

Remove elements from an array based on the indices provided in a separate array

1) Define the array a = [a,b,c,d,e,f,g,h,i,j]; using JavaScript. 2) Input an array 'b' containing 5 numbers using html tags. This will be referred to as the 'b' array. 3) Insert elements into array 'b' ensuring they are alwa ...

javascripthtmlarrayssplice

Eliminate a span element in Android when the content within the span is modified

Imagine I write a comment like this: Hey Sarah, take a look at this.... In this message, I want to emphasize Sarah. However, whenever I modify the name Sarah or delete even one letter, the span changes. The issue lies in my usage of spannableString.setSp ...

javaandroidhtml

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

htmlcss

A guide on dynamically adding a CSS stylesheet to an Angular component during runtime

I have a requirement to dynamically inject a stylesheet into a component at runtime. The CSS url needs to change depending on user configuration settings and the selected theme. Using styelUrls for static injection won't work in this case, as it is s ...

cssangularangular-components