Adjust the grid layout when minimizing

Is there a way to change the grid position when we minimize the screen?

For example:

<div class="row">
  <div class="col-lg-6 -col-sm-12 col-xs-12">
    <img src="http://placehold.it/350x150">//first image
  </div>
  <div class="col-lg-6 -col-sm-12 col-xs-12">
    <img src="http://placehold.it/350x150">//second image
  </div>
</div>

Normally, if we minimize the screen until sm or xs-screen it will look like this:

--------
|first |
|      |
|second|
--------

How can we make it look like this?

--------
|second|
|      |
|first |
--------

I'm not sure if this can be done with jQuery, and I have limited knowledge about jQuery. Can someone please help me achieve this?

jqueryhtmlcsstwitter-bootstrap

Answer №1

One way to achieve this is by utilizing the jQuery resize event.

<div class="row">
   <div class="col-md-6 col-md-push-6 col-xs-12">
      <img src="http://placehold.it/350x150" id="img1">//second image
   </div>
   <div class="col-md-6 col-md-pull-6 col-xs-12">
      <img src="http://placehold.it/350x150" id="img2">//first image
   </div>
</div>

Javascript:

   $(window).bind('resize', function () {
            var img1Src = $('#img1').attr('src');
            $('#img1').attr('src', $('#img2').attr('src'));
            $('#img2').attr('src', img1Src);
        });

Answer №2

When using Bootstrap, it is important to remember that it follows a 'mobile first' approach. This means you should prioritize designing for the mobile version before considering other versions.

<div class="row">
   <div class="col-md-6 col-md-push-6 col-xs-12">
      <img src="http://placehold.it/350x150">//second image
   </div>
   <div class="col-md-6 col-md-pull-6 col-xs-12">
      <img src="http://placehold.it/350x150">//first image
   </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

Tips for utilizing jquery.load for fetching a section of an html document or an entire html file

I'm experimenting with jquery's load function to dynamically fetch and display HTML content, rather than using $.ajax(). I enjoy exploring the various features that jQuery offers and want to understand how each one works. Below is the code I am ...

javascriptjqueryajaxjquery-load

What is the best way to display items within a table using React?

I'm just starting to learn React. Can someone show me how to use the "map" function to list elements from two different arrays in two columns? state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"] } render() { return ( <thea ...

javascripthtmlreactjsweb-frontenddom-manipulation

Dragging an image within a div using JQueryUI

Something strange is happening with my code. I am utilizing JQueryUI to enable dragging of div elements that contain an image tag. The issue arises when I start dragging the div - the image, which was perfectly centered within the div while stationary, now ...

jqueryhtmlcssjquery-ui

Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...

htmlcss

Styling the center menu

Is there a way to horizontally center this top menu using CSS? https://i.sstatic.net/9yvJf.png This is the HTML structure I am working with: <div class="wrapper_menu_hoz"> <div class="container_24 "> <div class="gr ...

htmlcss

Steps to trigger an action upon selecting a radio button on an HTML and CSS website

After creating a website with HTML and CSS that allows users to select options using radio buttons, I am now seeking advice on how to implement actions based on their choices. If a user selects an option, I want a specific action to occur, but I am unsur ...

javascriptphphtmlcss

What is the process for creating a custom Javascript function that can seamlessly integrate with other Javascript libraries?

Is there a way to create a method that can be linked or chained to jQuery methods and other library methods? For example, consider the following code snippet: var Calculator = function(start) { var that = this; this.add = function(x) { start = start ...

javascriptjquery

JavaScript to resize images before uploading without displaying a preview

I'm searching for a way to prevent the need to upload large or heavy image files. I believe utilizing the HTML5 FileAPI library is the best solution for this task. All necessary features have been implemented (upload, re-ordering, etc.), so now I ju ...

javascriptajaxhtmlhtml5-canvasimage-resizing

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

javascripthtmlcssvelocity.js

Prevent clicking here

I'm attempting to only prevent the click event on the current item with a certain class. $(document).on('click', '.item', function() { $(".item").removeClass('is-expanded'); $(this).addClass('is-expanded'); ...

javascriptjquery

Is there a way to automatically divide CSS-emulated table cells into multiple rows?

Utilizing the properties display: table and display: table-cell, I am attempting to evenly distribute some divs within a parent container. However, they all end up on the same row, causing overcrowding when there are too many divs like this: Even though I ...

htmlcsspositiontablelayout

Is it still considered unwise to use tables for layout purposes?

After spending four frustrating hours attempting to vertically align text without resorting to tables, I had to throw in the towel. I followed advice from a recommended solution on Stack Overflow, but my responsive layout requirements and complex CSS stru ...

htmlcss

Transfer information from a single form and distribute it across multiple forms with the help of jQuery or Javascript

Form1 has a variety of input fields including text, select, radio, and textarea. At the bottom there is a button labeled "copy" that allows users to copy data from all the fields in Form1. In different pages, I have three to four other forms with input fi ...

javascriptjquery

Withdrawal of answer from AJAX request

Is there a way to create a function that specifically removes the response from an AJAX call that is added to the inner HTML of an ID? function remove_chat_response(name){ var name = name; $.ajax({ type: 'post', url: 'removechat.php ...

javascriptphpjqueryajax

Having trouble with passing post data from jQuery ajax to a php page?

Attempting to retrieve post data using an alert() function, but encountering an issue where the data is not being passed to the PHP page. The result always shows {"success":false,"result":0} The goal is to transmit a password to the PHP page, hash it usin ...

javascriptphphtmljquery

Finding the parent node in jquery based on the value of the child node

let xmlTestCode ='<Tests> <Test> <Id>123</Id> <Name>AAA</Name> </Test> <Test> <Id>456< ...

jquery

Tips for ensuring proper function of bullets in glidejs

I am currently working on implementing glidejs as a slider for a website, but I am facing issues with the bullet navigation. The example on glidejs' website shows the bullets at the bottom of the slider (you can view it here: ). On my site, the bullet ...

javascripthtmlglidejs

Could not find the necessary Dependency (Laravel 5.5) for Bootstrap Sass

I'm new to using Laravel 5.5 and I want to integrate Bootstrap and Sass into my current project. However, I'm struggling to figure out where the dependencies are being pulled from. When I use the npm run watch command in the terminal, it compile ...

twitter-bootstraplaravelnpmsassdependencies