Image positioned above the text in the mobile layout following the text

Can the layout be adjusted so that on desktop, the image is on the right and text on the left in the lower box, but on mobile, the image appears above the text?

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

I understand that placing the image tag after the text tag in HTML would position the image to the right, but I want it to display differently on mobile.

HTML:

 <div class="box-mission">
        <div class="flex-row middle-sm">
            <div class="flex-col-sm-5 flex-col-xs-12">
                <img src="https://pickaface.net/gallery/avatar/unr_test_161024_0535_9lih90.png">
            </div>
            <div class="flex-col-sm-7 flex-col-xs-12">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

    <div class="box-mission">
        <div class="flex-row middle-sm">
            <figure class="flex-col-sm-5 flex-col-xs-12">
                <img src="https://pickaface.net/gallery/avatar/unr_test_180711_1752_p1n69px.png">
            </figure>
            <div class="flex-col-sm-7 flex-col-xs-12">
                <h3>consetetur sadipscing elitr,</h3>
                <p>aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                    kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua.</p>
            </div>
        </div>
    </div>

CSS:

.box-mission {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 60px;
    padding: 10px 10px 0 10px;
    box-shadow: 0px 2px 6px -3px #32435f;
}

Frameworks used: bootstrap: 3.4.1, laravel: 6.0

Looking for suggestions on how to achieve this layout modification. Any ideas?

htmlcsssass

Answer №1

When using bootstrap 3.4.1, it is important to utilize push and pull on breakpoints as demonstrated below: bootstrap 3 document

<div class="row">
    <div class="col-xs-9 col-md-push-3" style="background:red; height:100px"></div> 
    <div class="col-xs-3 col-md-pull-9" style="background:blue; height:100px"></div>
</div>

codepen

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

Stable header that jumps to the top when scrolled

I have implemented the JavaScript code below to set the header to a fixed position when it reaches the top of the page so that it remains visible while the user scrolls. Everything appears to be functional, but the header movement is abrupt and not smooth. ...

javascriptjqueryhtmlcss

Guide on aligning a division within another division?

Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...

htmlcss

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

cssangularjsuser-interfacekendo-uischeduler

Launching a modal in a new browser window with the help of JavaScript or PHP

I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...

javascriptphpjqueryhtmlcodeigniter

Make the card change to gray when clicked using Bootstrap

Is it possible to achieve a common function in an infinite list using HTML, CSS, JS, jQuery (on the user's side) where an item will be grayed out after being clicked? How can we implement this effect? 1.) When the user clicks on the card element htt ...

javascripthtmljquerybootstrap-4

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

htmlcssreactjstailwind-css

Download the PDF instead of just viewing or downloading it through a link

I need help configuring a link so that when the user clicks "download here," a PDF file is automatically downloaded to their desktop. Can someone provide guidance on how to achieve this? ...

htmlcss

CSS Padding Hover Transition solution for Eliminating Flickering Text issue

Is it possible to achieve this? I'm attempting to animate the padding around a centered text link. When the text link is clicked, the padding changes from 20% to 100%, which works correctly. The text is horizontally and vertically centered using CSS ...

csscss-transitions

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

cssangularflexboxangular-material

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Tips for updating the color of buttons after they have been selected, along with a question regarding input

I need help with a code that changes the color of selected buttons on each line. Each line should have only one selected button, and I also want to add an input button using AngularJS ng-click. I am using AngularJS for summarizing the buttons at the end ...

javascripthtmlcssbuttonangularjs-ng-click

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

javascriptjqueryhtmlasp.net

Using Ajax to trigger JSON-formatted HTML output

Issue with Populating Modal Window I am encountering difficulties while trying to populate a modal window dynamically with extended information retrieved from a mySQL database. Despite attempting various methods such as nested arrays, while loops, and for ...

phpjqueryhtmlmysqljson

Interact with the :before pseudo element when hovering over an element

Is there a way to manipulate the :before pseudo element when hovering over the main element? My goal is for the pseudo element to change its height when I hover over the main element. This is how my code looks: HTML <div class="object">& ...

htmlcsspseudo-element

CSS Grid with dynamically changing number of rows set to "auto", while ensuring one row always has a fixed size of "1fr"

Currently, I am experimenting with a CSS grid-based frontend and have encountered a specific requirement that keeps repeating itself in various parts of the frontend: A grid with a dynamic number of rows. Each row should be of variable size (auto). The f ...

htmlcsscss-grid

What is the best way to swap out an icon based on the chosen option?

Here is my code: $('#mySelect').on('change', function() { var value = $(this).val(); $(".title").html(value); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href=" ...

javascriptjqueryhtmlcss

What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors. ::-moz-selection { background: #fff; colo ...

htmlcssbackgroundselectionopacity

Use Jquery to select the checkbox inside the td element and mark it as

I've created an HTML table with checkboxes in the td elements, like so: <table id="my_table"> <tr> <td><input type="checkbox" name="td1"></td> <td><input type="checkbox" name="td2"></td> </ ...

javascriptjqueryhtmlcheckbox

Turn an entire div into a clickable element with a functional :active CSS rule that is compatible with IE10

I am currently working on designing a clickable panel for an html app that will include multiple text elements and images. Based on my understanding, this is typically achieved using a div. An example of this would be: <div class="myButton"> &l ...

htmlcssinternet-explorer-10