How to place two columns in a row properly in this situation

Question

I'm using Bootstrap I have coded this:


    
        
            
                
                IMAGE GOES HERE
                

                
                    
                    THUBMNAIL GOES HERE
                    
                
            
          
        
            
            CONTENT GOES HERE
            ...

And the result of this code goes here:

As you can see it separates the columns of images and the column of contents (product title, product description & etc).

However they are both placed in one row class.

So how to properly place them together in one row as the expected result shows here?

Expected Result:

UPDATE #1

If I remove col-lg-12 col-md-12 col-sm-12 from

of the images column & content column, and also add col-6 instead of col-12 to both column classes, this result will appears:

However, as you can see, the content looks thinner and still have differences with the Expected Result image.

So how to solve this issue?

user_2993390 · Answer

You're repeating the classes and simply complicated everything here, you have to define where you want break to full row it'll automatically break at that screen size, you needn't explicitly add another class, adding too many classes will confuse you and anyone who has to understand the code later. https://getbootstrap.com/docs/4.0/layout/grid/


  


  
  
      
        
          Cat
        
        
          The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.

user_14645474 · Answer

In both of your columns you have added the class col-12 which means that by default those columns will take all the row UNTIL you reach the first breakpoint which in this case would be col-sm. In order to fix this you have to specify col-6 instead of col-12 and if you check it in a screen size smaller than sm you'll notice each column is taking up to 6 places in the grid layout.




    
    
    
    Document
    


    
        
            
                
                    
                    IMAGE GOES HERE
                    
    
                    
                        
                        THUBMNAIL GOES HERE
                        
                    
                
              
            
                CONTENT GOES HERE

user_3739756 · Answer

Putting the div with content first and the one with the image after appears to mirror this layout correctly.

To define columns of equal width nothing more is needed than using class .col on each of them, as per official documentation (Bootstrap 5.0)



    
            
                
                CONTENT GOES HERE
                ...
              
            
            
                
                IMAGE GOES HERE
                

                
                    
                    THUBMNAIL GOES HERE

user_12151471 · Answer

Remove container class applied with slider-slick-img. It is not needed. And kindly share the link to your code where we can check with actual content(images and add to cart box). Else, with these texts, it is working fine here.

user_14279827 · Answer

You should not set 12 on lg screen for both div, set 8,4 on xl,lg set 6,6 on md and set 12,12 on sm.


    
        
            
                
                IMAGE GOES HERE
                

                
                    
                    THUBMNAIL GOES HERE
                    
                
            
          
        
            
            CONTENT GOES HERE
            ...

user_14844087 · Answer

I solved your issue by opting for full responsive col's using grid system as shown in my code.




    
            
                
                CONTENT GOES HERE
                ...
              
            
            
                
                IMAGE GOES HERE
                

                
                    
                    THUBMNAIL GOES HERE

user_16564994 · Answer

You should also include the meta tag "viewport" for your html code to be processed correctly by the browser.

You can try putting this in the section of your work.

How to place two columns in a row properly in this situation

7 Answers