在 PHP/CSS 中动态创建的网格仅在 Android Firefox 浏览器中看起来是错误的

我正在为我的救援网站制作一个新的可收养狗列表。我创建了一个列表页面，该页面从第三方 API 中提取图片和信息，然后列出它们：

http://dallaspetsalive.org/new-adoptables/

目标是，在普通浏览器中，带有图像和信息的div 浮动到左侧或右侧，形成两列列表，但随着屏幕变小，它会下降到一列。

这适用于我尝试过的所有浏览器，除了我的Android上的Firefox。我很困惑为什么那里会有所不同。就像div 重叠一样。这是截图： https://i.stack.imgur.com/jy2F3.png

这是PHP代码。

                foreach($dogsList as $dog) {
                    $num = $num + 1;
                    if($left) {
                        echo "<div id='"pet-search-left'">";
                        $left = 0;
                    } else {
                        echo "<div id='"pet-search-right'">";
                        $left = 1;
                    }
                    echo "<a href='"dog-profile?id=";
                    echo $dog['animalID'];
                    echo "'" style='"text-decoration: underline; color: #006bb7;'">";
                    echo "<img src='"";
                    echo $dog['animalThumbnailUrl'];
                    echo "'" style='"float: left; margin-right: 10px;'" /><h3>";
                    echo $dog['animalName'];
                    echo "</h3></a>";
                    echo $dog['animalGeneralAge'];
                    echo " ";
                    echo $dog['animalSex'];
                    echo "<br />";
                    echo $dog['animalGeneralSizePotential'];
                    echo "<br />";
                    echo $dog['animalBreed'];
                    echo "</div>";
                }

以下是正常大小的相关 CSS：

#pet-search-left { width: 270px; float: left; height: 200px; padding: 3px;}
#pet-search-right { width: 270px; float: right; height: 200px; padding: 3px;}

较小的尺寸：

#pet-search-left { width: 100%; height: 200px;}
#pet-search-right { width: 100%; height: 200px;}

这是怎么回事？

编辑：在Android Chrome上也是错误的。