Adapt to screen size changes by transforming a single row into two separate rows

Question

Adapt to screen size changes by transforming a single row into two separate rows

I am trying to create a two-column row with inputs:

    <div class="row first-row">
      <div class="column col-6">
        <div class="form-group">
          <label for="usr"
            >Sequence Number:</label
          >
          <input type="text" class="form-control sequence-number" id="usr" />
        </div>
      </div>
      <div class="column status col-6">
        <BaseDropdown
          label="Status:"
          :options="statusTypes"
          v-model="building"
          placeholder="Please select a status"
        />
      </div>
    </div>

https://i.sstatic.net/MUwJJ.png

My goal is to stack these columns into two rows when the screen is resized to mobile view, without changing the layout on mobile devices. I envision it to look something like this:

https://i.sstatic.net/JGNVe.png

Can anyone help me achieve this layout?

javascript html css mobile responsive-design

Answer 1

Answer №1

To simplify this process, consider utilizing Flex. You can rearrange your html to incorporate both fields within the column div like this:

<div class="row first-row">
    <div class="column col-6">
        <div class="form-group">
            <label for="usr">Sequence Number:</label>
            <input type="text" class="form-control sequence-number" id="usr" />
        </div>
        <div class="column status col-6">
            <BaseDropdown label="Status:" :options="statusTypes" v-model="building"
                placeholder="Please select a status" />
        </div>
    </div>
</div>

Then, incorporate flex to the column div and use a media query to change the flex-direction at a specific breakpoint:

.column.col-6 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .column.col-6 {
        display: flex;
        flex-direction: row;
    }
}

Answer 2

To simplify this process, consider utilizing Flex. You can rearrange your html to incorporate both fields within the column div like this:

<div class="row first-row">
    <div class="column col-6">
        <div class="form-group">
            <label for="usr">Sequence Number:</label>
            <input type="text" class="form-control sequence-number" id="usr" />
        </div>
        <div class="column status col-6">
            <BaseDropdown label="Status:" :options="statusTypes" v-model="building"
                placeholder="Please select a status" />
        </div>
    </div>
</div>

Then, incorporate flex to the column div and use a media query to change the flex-direction at a specific breakpoint:

.column.col-6 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .column.col-6 {
        display: flex;
        flex-direction: row;
    }
}

Adapt to screen size changes by transforming a single row into two separate rows

Answer №1

Similar questions

Selenium - Tips for entering text in a dynamically generated text field using Javascript!

100% width with a pixel offset

Is there a way to select an element within a nested list item only when the preceding list item is clicked using Jquery/JavaScript?

Is there a way to verify the presence of a service worker on a specific URL?

Creating a responsive design for a cropped image using CSS

Utilize a single image to encompass the entire background/theme

Tips for extracting links from a webpage using CSS selectors and Selenium

InvalidAction: The function forEach cannot be applied to "res"

Can one attach an HTML element to the bottom of another?

Printing reports in Angular 9

What is causing the permissions in firestore to not function properly?

Problem with single-table layout in DynamoDB and constraints on query parameters

The header of the bootstrap table will now feature a new button for toggling the visibility of the filter control

Unable to execute the 'getElementsByTagName' function as null value is passed as the parameter

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

What could be causing the alignment issue with cells in Bootstrap?

Encountering the error message "React child cannot be an object" while trying to map over an imported object referencing components

limited growth of float variable

Guide to shutting down Bootstrap 5 modal using React

Trouble altering an attribute using jquery