Ways to align two distinct columns side by side in a singular row on a designated spot for mobile display

Looking for guidance with the layout of my code. In mobile view, the image is currently displayed at the end after the paragraph, but I want it to be shown after the sub-header just above the paragraph. I've tried using flex and other methods, but the image keeps appearing all the way on the top above the header. Is there a solution to achieve this solely with HTML and CSS?

 <div class="row">
    <div class="col-md-10 col-lg-6">
         <div> Some Image Here </div>
    </div>
    <div class="col-lg-6">
        <h1>Header Here</h1>
        <h3> Sub-Header Here </h3>
        <p> Paragraph Here </p>
    </div>
</div>

In mobile view, the desired order is:

HEADER

SUB-HEADER

IMAGE

PARAGRAPH

htmlcssbootstrap-4

Answer №1

If you're looking to achieve a specific layout, consider utilizing separate columns in your design. By floating the columns on larger screens using the float-* classes and adjusting the order with the order-* classes for mobile responsiveness.

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-10 col-lg-6 float-left order-2 order-md-1">
            <div>Include Your Image Here</div>
        </div>
        <div class="col-lg-6 float-left order-1 order-md-2">
            <h1>Add Your Header Here</h1>
            <h3>Insert Sub-Header Here</h3>
        </div>
        <div class="col-lg-6 float-right order-3">
            <p>Place Your Paragraph Content Here</p>
        </div>
    </div>
</div>

Visit this link 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

Stopping all other audio players when a new one is played in Angular

I am in the process of creating a website using Angular to showcase my music, and I am looking for a script that will pause other audio players when a new one is played. Does anyone have a solution for this? HTML <div> <img src="{{ image }}" a ...

htmlangulartypescript

Sharing a div or text upon checking a box

I am new to JavaScript and I'm searching for an article or method to achieve the following task, whether it's through a form or just JS (without using PHP). I have a set of checkboxes labeled as box 1 - 4. When any one of them is checked, I want ...

javascriptjqueryhtmlforms

Creating a responsive CSS background image

I am using an image as a background for a class on the left side with a white background. The width of the class is 1368px and the image size is 392px by 600px. I want to fix this image on the left side of the class, making it responsive. Even though I hav ...

jqueryhtmlcss

Positioning canvas and navigation bar with CSS styling

I have a fixed position navigation bar at the top, and a canvas. Unfortunately, the top of my canvas is being hidden behind the navigation bar. I do not want to change the canvas position to absolute. I need to position the canvas below the navigation ba ...

javascriptcsshtmlcanvas

What are some ways to restrict dynamic form submissions?

$(document).ready(function(){ var i = 1; $('#add').click(function(){ if(i < 5){ i++; $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="form-group">& ...

javascriptphphtmljqueryjquery-events

Saving a boolean option (Yes or No) via a radio button in a MySQL database

When it comes to storing Yes/No form radio button values in a PHP/MySQL application, I've noticed a variety of approaches. I'm curious to know which method is considered more effective and why. The scenario involves a typical Yes/No question with ...

phpjqueryhtmlformscodeigniter

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this probl ...

htmlcss

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example: .position{ position:absolute; right:10px; top:20px; } This is where the idea of using a mixin comes in handy: .position(@absolute:ab ...

cssless

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

javascripthtmlcsssvgicons

What can I do to ensure that this nested footer stays fixed to the bottom of the page?

I've been experimenting with different approaches, but I'm struggling to find a solution for making the footer stay at the bottom of the page. The challenge arises from having multiple nested divs within each other. My goal is to have the border- ...

csssticky-footerborderhtml

What is the best way to code an HTML block with jQuery?

Could someone guide me on creating the following using jQuery: <div class="card"> <img src="images/cat6.jpg" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Watson</b></h4> ...

jqueryhtml

Guide to redirecting on click when utilizing an iframe

I needed to prevent the page from reloading before the action was complete by using an iframe. However, I encountered an issue where I needed the page to refresh after the action took place. I attempted two methods to achieve this - refreshing the page and ...

phphtmliframe

Can the default DOM structure of a Jquery Data Table be customized to fit specific needs?

I have incorporated a Jquery Data Table Plugin that can be found at http://datatables.net/api. This plugin comes with its own search box, which is automatically added to the page when enabled. The search box is nested within its own div structure like this ...

jqueryhtmlcssdatatable

In PHP, what is the best way to close the HTML tags found in this array?

I am struggling with an array that contains HTML tags and I need to create a formatted output using a PHP function. However, I am having trouble closing the tags correctly and would appreciate some assistance. The existing array is structured line by line ...

phphtmlarraystagsoutput

Avoiding repetitive clicking of buttons in jQuery—strategies for success

Hello, I am currently facing an issue where I need to reset the content of a div using an AJAX call when a user clicks a button. However, if the user clicks multiple times in quick succession, an error occurs. I would like to find a way to prevent users fr ...

javascriptjqueryhtmlajax

Are the CSS properties from the parent template automatically applied to the extended child template in Django?

While working on a Django site, I encountered an issue with applying CSS properties to an extended template file. The CSS file was imported in the parent template but the changes were not reflecting in the child template. Here is the snippet of my code: ...

pythonhtmlcssdjangodjango-templates

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

javascriptjqueryhtmlangularjssettimeout

How to utilize CSS variable references across different files in React?

In my React project, I have integrated multiple variables that I would like to be able to access from other CSS files in order to maintain a unified codebase for specific UI configurations such as colors and buttons. However, I am uncertain whether these ...

cssreactjs

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...

javascripthtmlcss

Issue with jQuery: Function not triggered by value selection in dynamically created select boxes

I am in need of some assistance with my code that dynamically generates select drop down menus. I want each menu to trigger a different function when an option is selected using the "onchange" event, but I am struggling to implement this feature. Any hel ...

javascriptjqueryhtml