Bootstrap not aligning divs with Ajax and SQL

Question

I installed this script: https://www.webslesson.info/2017/03/load-content-while-scrolling-with-jquery-ajax-php.html

it works well but I have a problem with Bootstrap I can't align the columns

I modified the code in the while loop with this:

echo '<div class="border box col-3 m-1 mx-auto p-2 rounded text-center">';
echo '&nbsp;&nbsp;<span>'. $row['post_title'] .'</span>&nbsp;&nbsp;<br />';
echo '<span class="small">'. $row['post_description'] .'<br />'. $row['post_author'] .'</span>';
echo '</div>';

And I modified the index.php file to add two divs with a class 1 container & 1 row In theory the result should look like this:

Result.1 | Result.2 | Result.3 | Result.4

Result.5 | Result.6 | Result.7 | Result.8

etc ... But instead I have this:

1. Result.1
2. Result.2
3. Result.3
4. Result.4

etc ...

I'm looking for it but I can't find where the problem comes from when I test in HTML without PHP & AJAX the divs are displayed well next to each other and not below each other so the problem lies elsewhere.