The alignment of the code is not properly flowing within col-sm-12

When the col-sm is activated, it should stack like this:

[ img ]

[ content ]

[ img ]

[ content ]

But instead, it stacks like this:

[ img ] [ content ]

[ img ] [ content ]

I have removed classes to see if it affects anything, but nothing changes. What am I doing wrong? Here is my HTML code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="homeContent">
  <div class="row homeContent-block">
    <div class="homeContent-block-image col-md-5 pull-left col-sm-12 hidden-xs">
      <img src="../../Content/images/w_city.jpg" alt="city pic" />
    </div>
    <div class="homeContent-block-image col-md-7 col-sm-12">
      <div class="homeContent-block-content-sub">
        <h1>This is a title.</h1>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
    </div>
  </div>
  <div class="row homeContent-block">
    <div class="homeContent-block-image col-md-5 col-md-push-7 col-sm-12 hidden-xs">
      <img src="../../Content/images/w_city.jpg" alt="city pic" />
    </div>
    <div class="homeContent-block-image col-md-7 col-md-pull-5 col-sm-12">
      <div class="homeContent-block-content-sub">
        <h1>This is a title.</h1>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
    </div>
  </div>
</div>


UPDATE

I mistakenly typed col-s-12 instead of col-sm-12. Even after correcting it, the issue persists.

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

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...

The mouse pointer adjusts according to the event

I am working on an ajax request and I have implemented a feature where the cursor changes appearance. document.body.style.cursor = "wait"; This immediately shows the cursor as a spinning circle when the request starts. At the end of the request, I ch ...

Trouble with Bootstrap scrollspy upon resizing the browser dimensions

Welcome to all you talented Stackoverflow bootstrappers! I have a burning question that I believe has not yet been asked, and I am eager to discover the solution. Let me walk you through how to replicate this bug: First, navigate to the following page: ...

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

Media queries function only at the beginning

@media screen and (max-width: 1336px) { .rectangle-box { visibility: visible; } #p-cactions { top: 461px; left: 410px; } } @media screen and (max-width: 1040px) { .rectangle-box { visibility: hidden !impo ...

The content on the right side is spilling over my footer and causing

I am struggling to understand why the content in the right column is overlapping my footer. I believe it has something to do with a float, but I can't seem to pinpoint the exact issue. Could you please take a look at this page for me and provide some ...

How can we modify the :before pseudo-element when hovering over the main DIV?

One of the elements on my website is a div that resembles a speech bubble. The main part of the div is the bubble itself, while the :before element serves as the arrow pointing towards it. My goal is to create a hover effect in CSS where not only the main ...

How can we use JavaScript to retrieve an element with custom styling?

I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using: <li ><a href="plumbing.php"&g ...

Tips for updating the text content of an HTML input element during a unit test

I am currently writing unit tests for an Angular application and I am attempting to set the text content of an input element using a unit test written with Jasmine. <input type="text" id="accountid" class="form-control col-sm-3" [(ngModel)]="record.acc ...

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

After filling out both the email and password form fields and clicking the sign-in button, my script is functioning correctly. However, upon clicking the sign-in button, I want the user to be redirected to the home page. Currently, the user remains on the ...

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

In HTML, define a trigger that will submit the form when a <p> tag is clicked

What is the alternative way to make an element like <p> trigger form submission without using a button? Any solutions available? <form> <p>I wish for this to submit the form</p> <input type='submit' value=&apo ...

Align list item span to the center

I have encountered an issue with creating a match list using li and ul tags. Despite applying the center span to a fixed width and the team spans to the remaining space, the widths still appear different. How can I ensure that the team spans have the same ...

How can a loading bar be shown while a PHP page is loading?

I currently have an HTML form that directs to a PHP file upon submission. The PHP file takes some time to load due to background processes running, so I am interested in implementing a progress bar or alert to indicate when the file is fully loaded. Does ...

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

The Super Sub menu is failing to display correctly as intended

I encountered an issue while trying to create a Super sub-menu. The problem is that the super sub-menu appears when I hover over the main menus, instead of the sub-menus. I suspect there may be something wrong with the display: none; attribute, but I' ...

When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block". <ul> <li><a href="#">item</a></li> <li><a href="#">item</a ...

What is the process for adding extra CSS to a webpage displayed in WebView2?

Currently, I am utilizing the Webview2 control within a winform application. My goal is to enhance the behavior of the loaded page by injecting additional CSS code when a specific URL is being displayed in the browser control. Specifically, I aim to implem ...

I must highlight a specific link based on the user's action

Is there a way to dynamically color links based on user interaction? For instance, let's say I want to specify the color for unvisited links: a.newlink:link { color: red; } <a href="/privacy" target="_blank" class="newlink">New l ...

What is the best way to make a fixed div appear when a user scrolls down the page, similar to Facebook

As I was scrolling down on Facebook, I noticed that the ads divs stay fixed when they reach the bottom. Has anyone figured out how to achieve this effect? I believe it can be done using a combination of JavaScript and CSS. Does anyone have the code for im ...