Moving up stacked columns with bootstrap or any other CSS technique

Is there a way to make column [3] move up if column [2] is taller than column [1]?

[1][2]

[3][4]

Check out this bootply example of the layout : http://www.bootply.com/KbAf8UOk9c

Currently, there is empty space between column [1] and [3] that I would like to eliminate by moving column [3] up.

(Note: column [4] is styled to move up under column [2])

Thank you!

UPDATE: In mobile view, the columns should stack like this:

[1]

[2]

[3]

[4]

UPDATE 2: I'm still working on finding a solution to this issue, so stay tuned for updates.

htmlcsstwitter-bootstrap-3

Answer №1

To achieve this layout, you can utilize nested row classes:

<div class="container" style="border:1px solid black;">
  <div class="row">
    <div class="col-xs-8" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[1] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in, vel te munere ubique temporibus. Ius essent integre ne, te mel autem quaeque, ad omnes voluptua salutandi mel. Vitae perpetua abhorreant cum et, est definitiones vituperatoribus ea. Sed no admodum temporibus reformidans, id nam dolorem vivendo accusamus, et vel solum postulant.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[3] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in</p>
        </div>
      </div>
    </div>
    <div class="col-xs-4" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[2] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit am...
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[4] This column needs to shift up depending on the content onthe top-left section</p>
        </div>
      </div>
    </div>
  </div>
</div>

The main row consists of two columns, col-xs-8 and col-xs-4, each containing multiple nested row classes with col-xs-12. Depending on the content, these columns will resize and reposition based on the content above. Odd-numbered columns go in the right col-xs-8, while even-numbered columns go in the left col-xs-4.

For a visual example, refer to this Bootply.

I chose to use col-xs-* for columns as they are the most versatile, but you can adjust to col-sm, col-md, or col-lg classes based on your requirements.

Answer №2

Regrettably, no viable solution was provided (I had hoped for a css-only fix). Ultimately, I discovered a solution utilizing jQuery masonry:

If you prefer, you can develop your own custom JavaScript to cater to your specific requirements (particularly if the full masonry logic is excessive)... However, it appears that JavaScript logic is necessary to address the "gap(s)" issue. Here is a working example based on the original bootply sample: Tip: When implementing the masonry logic, you can designate your columnWidth value as the smallest column width/class - in my case, this was .col-md-4 - especially when the column widths vary.

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

The process of uploading images to a server by making an AJAX call to a PHP file

I have an input file and I want to upload the attached file to the server with a message saying "uploaded successfully" when I click on the upload button. However, I am getting a "file not sent" message. (The uploaded images need to be saved in the uploa ...

javascriptphphtmlajax

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

javascriptcssgetelementbyidpseudo-elementgetcomputedstyle

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

javahtmlcssseleniumcss-selectors

What is the best way to retrieve the data submitted in the Input field by using Ajax?

One feature I'm working on involves an input field within a form where users can update their name by clicking a button. The goal is to capture this change in the input field using Ajax and update it accordingly. Here's the HTML code snippet: & ...

jqueryhtmlruby-on-railsajaxcoffeescript

Is it possible to have CSS handle only horizontal overflow?

Can CSS 2.1 be used to achieve horizontal overflow only? overflow: auto; If this code will result in both vertical and horizontal scrollbars for a block element, is there a way to display only horizontal scrollbars (for example, within a <div>)? Ho ...

htmlxhtmloverflowcss

Add the directive prior to rendering the HTML

I attempted to comprehend the problem below: My html string is rendered using ng-bind-html I successfully replaced a specific placeholder in the html string with a directive (or multiple). For example, I changed [placeholder]test[/placeholder] to <my- ...

htmlangularjsangularjs-directive

Tips for arranging a menu horizontally with buttons in CSS

I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at . My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution. Curre ...

cssmenualignment

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

javascripthtmlcss

Selected selector failing to function properly

I have been diving into the world of jQuery selectors and wanted to share a small example I created. The idea is to display what has been selected from a dropdown menu, but unfortunately, my example isn't functioning properly. I must be making a small ...

jqueryhtmlselectjquery-selectors

The Bootstrap 4 card component is a versatile and stylish

Currently working on a display layout using Bootstrap 4, specifically utilizing cards. The issue I'm facing is that the text exceeds the limit of the card, causing it to overflow. Is there a solution to make the text automatically wrap to the bottom ...

javascripthtmlcssbootstrap-4

No action is triggered when the button is hovered over

I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening. The primary button at the bottom is also experiencing the same issue. body { background-color: #aa ...

htmlcsshover

Refrain from showing content beneath a certain element

Is there a way to hide all content that appears after a specific element, such as a particular class of div? The issue I am facing involves using a 1&1 webpage builder with a restrictive layout-template enforced by my boss. I am trying to remove the foote ...

javascriptjquerycsshidefooter

Using jQuery to display the total number of div elements for the selected individuals

Hey there, I'm just diving into jQuery and could use some assistance. I'm attempting to achieve a specific outcome with my code, but I'm running into some difficulties. Hopefully someone can lend a helping hand! Here's the scenario: If ...

jqueryhtmlajaxforms

Issue with React when attempting to add a secondary class to Toggle component

Is there a way to add a second class to my <div> with the class "button"? When I try to append 'toggle-button', the class doesn't seem to work. <CSSTransitionGroup transitionName="buttonAninmated" transitionEnterTimeout={30 ...

htmlcssclassreactjssass

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

What is the reason behind the malfunction of the float?

Having an issue with the "1" form not extending to 100% width next to the "Tickets". Here is a visual representation of the problem: View how it currently looks here. html: <section id="main_content"> <div class="left inner"> ...

jqueryhtmlcss

Is there a way to automatically redirect the main html page to a different html page upon logging in?

I have created a main page in HTML with a login box that displays a message saying "Login successful" or "Login failed" based on whether the password entered is 8 characters or more. The validation function for this works correctly, but after successfully ...

javascripthtml

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

javascriptjqueryhtmlcanvas

Dealing with content extending into the previous column within CSS columns

I used this code pen example to perfectly illustrate the concept. To demonstrate, I applied the following CSS code. Try hovering over the second card in the top row. .custom-hover:hover { transform: scale(1.5); } In essence, when the top element of a ...

cssbootstrap-4

Decrease the distance between hyperlinks

I understand that this question has been asked numerous times before, but as a beginner in HTML, I still require some assistance. Given the code provided below, how can I decrease the spacing between the links in each column? Code: a { color: white; ...

htmlcsstwitter-bootstrap-3