我检查了网站，并且您覆盖了Bootstrap，这是一个更糟糕的解决方案.您应该保留原始的Bootstrap，然后以另一个CSS文件或内联样式进行更改.

另一方面，您已为 .headerSection1 赋予 margin-top:-4％.这使得文本的一部分不可见.

您的页面没有响应.它扩展了页面的100％宽度.这是因为给容器提供了负值.

我强烈建议您使用Bootstrap的 container-fluid ， row 和 col s.

关于您的问题:您的 1 和 10 位于不同的div中.您可以将它们放在相同的 div 中并定位.

I designed a web page where few of the HTML elements aren't responsive. These elements are dynamically generated with jQuery and I believe, there should be a way I can make them to look responsive. Media Queries are an option but if it's possible to use BootStrap (Though I am using it but in few cases, unable to do the designs perfect) or custom CSS to force them to be responsive. Here is a scenario where HTML element is created on successful Ajax call:

//Dynamic checkboxes as Flag For Review
$('.cbFlag').each(function () {
    $(this).hide().after('<div class="class_checkbox"></div>');
});

$('.class_checkbox').on('click', function () {
    $(this).toggle lass('checked').prev().prop('checked', $(this).is('.checked'))
}); 

Somehow I tried to make it fixed but failed:

.class_checkbox {
    width: 20px;
    height: 18px;
    position: fixed;
    margin-top: -5%;
    margin-left: 82%;
    background: url(https://i.ibb.co/1GnSqmp/example.png);
}

.class_checkbox.checked {
    width: 20px;
    height: 18px;
    background: url(https://i.ibb.co/jWxbHF5/example-02.png);
 }

In the same way, the page with other elements are bit shattered like the number and details sharing screenshots below: In Image 2, two divs are created and tried to use float left/right positioning, but this doesn't make them aligned accordingly (These are screenshots of screen resolution - 1920 * 1080, but in few cases when the resolution is small, the designs are perfect. Again for mobile view, the number and flag are shattered)

Current View:

Image 1:

Image 2:

Expected View:

I've checked website, and you've overwrited Bootstrap, that's a worse solution for this. You should keep original Bootstrap, then make changes in another CSS file or inline style.

On the other hand, you have given margin-top: -4% to .headerSection1. That makes the part of text invisible.

Your page is not responsive. It extends the page's 100% width. This is because of giving negative values to containers.

I strongly recommend you to use Bootstrap's container-fluid, row and cols.

On about your question: Your 1 and 10 are in different div's. You can put them in same div and position that.