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?

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

Using jQuery to create two identical widgets

Just starting out with JQuery and had a question about a specific problem I'm facing: Imagine you want to include 2 textboxes with datepickers on an HTML page using jQuery UI. Since jQuery works based on "ID" rather than "Class", the following code w ...

htmljquery-uijquery-ui-datepicker

Why don't media queries take effect

After thoroughly reading all the @media topics on this site, it appears that the code should be functioning correctly. body { background-color: yellow; } @media screen and (min-width: 1080px;) and (max-width: 2000px;) { body { backgrou ...

cssresponsive-designmedia-queriesviewport

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

How can I customize the color of a date range in the jQuery date picker?

Currently, I am using the following method to set a different color for a specific date range - April 5th to April 7th. You can view it here: http://jsfiddle.net/sickworm/dpvz52tf/ var SelectedDates = {}; SelectedDates[new Date('04/05/2015') ...

jquerycsscalendarbackground-colordatapicker

Difficulty encountered when displaying JavaScript variable content within HTML in a React component

I'm currently exploring a backend administrative dashboard framework known as admin bro. My current project involves creating a tooltip component, and here is the code I have developed so far. class Textbox extends React.PureComponent { render() { ...

javascripthtmlreactjs

Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...

htmlcss

What is a method to prevent a div from being rendered in CSS, rather than simply hiding it from view

Although I am aware that the div can be hidden using CSS, its persistent existence is causing layout issues. Is there a way to completely eliminate any rendering of the div so that it ceases to exist? ...

htmlcssmaterial-ui

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss

JavaScript's addition of CSS animation not functioning as intended

I am facing an issue with a web page utilizing Bootstrap 5. The webpage consists of one element stacked on top of another. My goal is to fade-out the top element after a certain period. Here is what I have tried: HTML <div id="host" class=&qu ...

css

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

How can I determine which component the input is coming from when I have several components of the same type?

After selecting two dates and clicking submit in the daterange picker, a callback function is triggered. I have two separate daterange pickers for SIM dates and Phone dates. How can I differentiate in the callback function when the user submits dates from ...

javascriptjqueryhtmlangularjs

Horizontal scroll box content is being truncated

I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off. Here's the snippet of code causing the issue: function feedbackDiv(feedback_id, feedback_title, feedb ...

javascripthtmlcssscrollhorizontal-scrolling

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

javascriptjquerycss

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Loading an empty CSS file in Node.js

Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server ...

javascripthtmlcssnode.js

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

javascripthtmlvue.jsnuxt.jsvuelidate

Reverse the text alteration when the user leaves the field without confirming

Upon exiting a text box, I aim to display a confirmation dialogue inquiring whether the user is certain about making a change. If they select no, I would prefer for the text box to revert back to its original state. Is there an uncomplicated method to ach ...

javascriptjqueryhtml

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height