Make it so that columns are always on one row-CodePudding

When the screen is big, everything is how it's supposed to look. The problem comes when you are using a phone. I would like these two columns to ALWAYS be on one row, but right now if you are on mobile the columns will stack. How can I make it so that they just resize and stay on one row no matter the size of the screen? I would like the first column(left one) to be the one that gets resized.

    <div >
        <div >
        <div >
            <div >
                <label asp-for=Title></label>
                <input readonly  asp-for=Title placeholder="Title"/>
            </div>
            <div >
                <label asp-for=Description></label>
                <textarea readonly  asp-for=Description rows="3"></textarea>
            </div>
            <div >
                <label asp-for=Price></label>
                <input readonly  asp-for=Price/>
            </div>
            <div >
                <label asp-for=Location></label>
                <input readonly  asp-for=Location/>
            </div>
            <div >
                <label asp-for="CategoryName"></label>
                <input readonly  asp-for="CategoryName" />
            </div>
            <div >
                <label asp-for="DateCreatedOn"></label>
                <input readonly  asp-for="DateCreatedOn" />
            </div>
        </div>
        <div >
            <div >
                <div >
                    <div >
                        <img id="image1" src="@profilePictureSrc" >
                    </div>
                    <div >
                        <input readonly  asp-for="UserName"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Assuming you are using bootstrap, according to https://getbootstrap.com/docs/5.1/layout/grid/ you just have to change from lg to the breakpoint you want

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <div >
        <label asp-for=Title></label>
        <input readonly  asp-for=Title placeholder="Title" />
      </div>
      <div >
        <label asp-for=Description></label>
        <textarea readonly  asp-for=Description rows="3"></textarea>
      </div>
      <div >
        <label asp-for=Price></label>
        <input readonly  asp-for=Price/>
      </div>
      <div >
        <label asp-for=Location></label>
        <input readonly  asp-for=Location/>
      </div>
      <div >
        <label asp-for="CategoryName"></label>
        <input readonly  asp-for="CategoryName" />
      </div>
      <div >
        <label asp-for="DateCreatedOn"></label>
        <input readonly  asp-for="DateCreatedOn" />
      </div>
    </div>
    <div >
      <div >
        <div >
          <div >
            <img id="image1" src="https://picsum.photos/200" >
          </div>
          <div >
            <input readonly  asp-for="UserName" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>