It seems that the class content you utilized has caused some CSS issues.
In Bootstrap, each row consists of 12 columns. Upon reviewing the code provided, it appears that you have allocated 8 columns to the first content using class="col-md-8 first-content". This leaves only 4 columns available for allocation, which have been assigned to the third div. Due to the default left float property, this places the content on the right-hand side of the row.
If you introduce additional spacing between the divs using margins, they will automatically move to a new row below.
Therefore, ensure that all divs have:
margin: 0px;
Below is the complete code snippet for reference:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-8">
Some content
</div>
<div class="col-md-4">
This content needs to float left
</div>
<div class="col-md-8">
Some other content
</div>
</div>
</body>
</html>
An issue in your code:
You have included two divs with col-8 in the same row. The browser calculates this as 8+8=16, exceeding the maximum of 12 columns per row. Consequently, it creates an additional row and moves the second div into it, allocating another 8 columns to it.
Please refer to the image below for visualization:
https://i.sstatic.net/eUqps.png