push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here.

I have three (div) elements: two in one row and another in a separate div. How can I adjust the positioning so that the blue element is placed between the orange and yellow divs when viewed on mobile?

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
     <div class="row orange"></div>
    <div class="row yellow"></div>
  </div>
  <div class="col-xs-12 col-md-8">
    <div class="row blue"></div>
  </div>
</div>

htmlcss

Answer №1

<div class="wrapper">
   <div class="content-section">
     <div class="col-xs-12 col-md-4">
       <div class="green"></div>
     </div>
     <div class="col-xs-12 col-md-8">
       <div class="purple"></div>
     </div>
     <div class="col-xs-12 col-md-4">
       <div class="pink"></div>
     </div>
   </div>
</div>

css:
.wrapper {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.green {
  float:left;
  background: green;
  padding: 20px 30px;
}
@media (min-width: 992px){
  .purple {
     float:left;
     padding: 20px 30px;
     background: purple;
     height: 400px;
   }
}/*not always necessary*/
@media (max-width: 992px){
  .purple {
     float:left;
     padding: 20px 30px;
     background: purple;
   }
}
 @media (min-width: 992px){
  .pink {
    float:left;
    padding: 20px 30px;
    background: pink;
    position: absolute;
    bottom: 0;
    left: 0px;
   }
  }

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

Tips for sending a selected option value to jQuery via AJAX using the name attribute

Is there a way to send the section option value using ajax, but only for selection and checkboxes? The issue I'm facing is that when posting, the section and checkbox appear as undefined. Thanks in advance. PHP Code <?php $parameters = new P ...

phpjqueryhtmlajax

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

c#htmlasync-awaitblazorblazor-server-side

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

javascripthtmlgoogle-chromemicrosoft-edgechromium

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Tips for enhancing the flexibility of the owl carousel

I've been trying to make four items fit on a medium screen and two on a mobile device, but no matter what I do - adjusting widths, heights, columns, and responsive classes like col-6, col-md-3, col-lg-3 - nothing seems to work well. I could really use ...

htmlcssbootstrap-5owl-carousel

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...

pythonhtmlseleniumexpand

Stopping an HTML5 range input at a specific number: Tips and tricks

Does anyone have suggestions on how to use angularjs to stop a range slider at 75? I attempted it but it doesn't seem like the best approach. Any guidance would be appreciated. [EDIT for clarification after max=75 answer] Just to clarify, I want to di ...

javascriptangularjshtmlhtml-input

Issues with plugins in Rails 4 are causing functionality to not be operating

I recently installed a template and encountered an issue with some of the JavaScript functionality. However, upon checking the compiled list of JavaScript files, I can see that all the files have loaded successfully and the CSS includes all the necessary f ...

javascriptjqueryhtmlcssruby-on-rails

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

Problem with the purity of :global() CSS-module selectors in NextJS

Currently in the process of migrating an app from CRA to NextJS, I've encountered an issue with the .module.scss files of certain components and pages: Syntax error: Selector ":global(.label-primary)" is not pure (pure selectors must contain ...

cssreactjssassnext.jscss-modules

I am facing an issue where new tags are not being created when I pre-fill values in the tags input field on Bootstrap

When working on the Product Edit Page, I successfully displayed the old data that was selected previously. However, I am facing an issue with adding new tags. The new tags do not appear when I press enter or space after typing in the input field. It is pos ...

javascripthtmljquerycssbootstrap-4

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

pythoncssflaskjinja2

The Stripe card element seems to be missing from the form

I'm a newcomer to angularjs and currently working on integrating version 3 of the stripe api into my angular application. I followed the steps provided on the stripe website, but faced an issue when trying to incorporate their code which is primarily ...

jqueryhtmlangularjsstripe-paymentsdom-manipulation

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

javascriptjqueryhtmlcss

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

PHP, HTML, Email - Special characters in emails are being altered into other symbols

Here's the Situation... I am currently utilizing PHP to send out emails in a conventional manner... Snippet 0 mail('', $subject, $message, $headers); ... with the following content setup: Snippet 1 $boundary = uniqid('np&a ...

phphtmlemail

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

javascriptjqueryhtmlcssiframe

Ensure that the jQuery Knob is set to submit any modifications only after the final adjustment

Utilizing jQuery Knob by anthonyterrien, I have configured the step to be 20. My goal is to transmit the knob's value to the server. The issue arises when the change function is triggered every time the user adjusts the knob using either a right or le ...

javascriptjqueryhtmlajaxjquery-knob