Organize Columns Using Bootstrap and/or Bootstrap Flexibilization

Here is my current setup:

                <div class="row">
                    <div class="col-md-6">
                        <p>A lengthy and dull text</p>
                    </div>

                    <div class="col-md-6">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

When viewed on mobile, the current order is text first, then photo. However, I would like the photo to be displayed first followed by the text.

cssflexboxtwitter-bootstrap-4

Answer №1

Web Development

<div class="row flex reverse-column">
    <div class="col-md-6">
        <p>An incredibly long and tedious piece of text</p>
    </div>

    <div class="col-md-6">
        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="amazingimage.jpg" alt="" />
    </div>               
</div>

Cascading Style Sheets (CSS)

@media( max-width: 767px ){

    .flex{
      display: flex;
    }
    .flex.reverse-column{
      flex-direction: column-reverse;
    }
}

Answer №2

To achieve a flipping effect on two divs, you can add unique IDs to each and use jQuery. However, in this example, I am demonstrating how to do it using only CSS.

<style>
/* Styles for smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width: 320px)
and (max-device-width: 480px) {
.row { display: table; }
#first { display: table-footer-group; }
#second { display: table-header-group; }
}
</style>

<div class="row">
    <div class="col-md-6" id="first">
        <p>A long boring text.</p>
    </div>

    <div class="col-md-6" id="second">
        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
    </div>
</div>

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

Replacing Material-UI dialog fonts

I have created a unique User Confirmation Dialog using the Material UI Dialog component, similar to the example provided here While working on customizing the dialog, I encountered an issue with changing the font. Although I was able to change the color a ...

cssreactjsmaterial-ui

What is the best way to create a responsive design that positions an element between two others?

There are two types of elements in my project: Type "A" - a text block Type "B" - a graphical block I am looking to create a responsive layout for these elements. On small resolution screens, I want them to be arranged like this: "A" "A" "B" ...

htmlcsstailwind-css

When using Phonegap in conjunction with AngularJS ng-view, the full-screen mode cannot be

I have seen similar questions asked before, but none of the solutions I found have worked for me so far. Here are some key parts of my index.html file: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, ...

javascripthtmlcssangularjscordova

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

javascripthtmlcsslayoutflexbox

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a ...

jqueryhtmlcssweb

What is the best way to create a personalized image as the background in WordPress using CSS for a client?

I have this in my style.css .showcase{ background: url("x.jpg") no-repeat 0; } My website is built on WordPress and I have implemented advanced custom fields for the client to edit text. However, I am struggling to find a way for them to change the ...

phphtmlcsswordpress

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context I have been working on a customized autocomplete feature using Angular Material, and I need to adjust the height of the dropdown results box for better visibility. Exploration After conducting some research, I discovered that Angular Material cu ...

javascriptcssangularjsautocompleteangular-material

The absence of a scroll bar on the web application is preventing me from scrolling properly

The vertical scroll bar on my Angular app seems to have disappeared mysteriously. I haven't made any changes to the code recently, and I'm struggling to figure out why it's missing. I've spent days trying to troubleshoot this issue with ...

htmlcssangular

The fundamental element in CSS for structuring and styling web

What distinguishes the selector patterns E * F and E F? Both selectors apply the appropriate style to element F which is a child of element E. Consider the following HTML structure: <div id= "parent"> <div id="subparent"> <div i ...

htmlcss

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

jqueryhtmlcsstagssubmit

Optimizing CSS usage within Django: top recommendations

Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...

javascriptpythonhtmlcssdjango

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

javascriptcssblogger

Tips for validating certain input fields within a designated div container

Is there a way to validate only specific fields within a div, rather than all fields? Take a look at this jsfiddle for an example. Once validation is passed, I want the div to be hidden. However, I do not want to include certain fields such as the input fi ...

javascriptjqueryhtmlcss

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

I need help figuring out how to automatically adjust the width of div 'one' and div 'three' to the screen side while keeping the width of div 'two' static using CSS. All three divs should be in the same row. Here is my HTML c ...

htmlcss

Design a collection of image icons to use as a toolbar in a web

I am in the process of creating a basic online application that allows users to select images from a toolbar (or storage box) and drag them onto a canvas. I am relatively new to web development but have figured out the drag and drop functionality. Right no ...

javascriptcsshtml

Adjust the height and width of the divisions in Fusion Charts

I'm attempting to adjust the dimensions of a Fusion Chart division, but it seems that changing the height and width also impacts the size of the chart itself. Code: <div class="col-lg-4"> ...

csshtmlfusioncharts