Bootstrap 3 make row's column float to right

Question

So before I go deeper into the problem I want to point out simple requirements of how I want this to be accomplished, if possible.

a) Because I'm modifying the Woocommerce template which uses Bootstrap 3 I can't just simply switch to Bootstrap 4 even though the newest version would really help me a lot.

b) I can use any technique or custom code as long as it works fine even if it's out of the Bootstrap 3 framework scope.

So here's the fiddle: https://jsfiddle.net/wL1kjc0y/

I also want to make this product list more playful so for instance, for odd items I want to make the product name, text, button to be floated to the right side, so that the product image would appear to the left, and pretty much the same for even items - image floated to the right and text contents floated to the left.

I created for text contents div.col-lg-6 element and col-lg-6 for the image. The problem is that .pull-right class does not work if I apply it on div.col-lg-6 element which wraps Product contents. And also because Bootstrap 3 doesn't use flexbox I added this code:

.d-flex {
    display: flex !important;
}

to the element that wraps both columns, so that vertical centering works properly for text. And I found out that float: right; does not work on flex elements. So I'm not really sure if it's even possible to do what I want, everything works fine if I remove the .d-flex class definition then I can use .pull-right class but then the text wouldn't be centered vertically.

You can take a look at the example where .d-flex is removed and .pull-right class is applied to the first item, and it works as expected: https://jsfiddle.net/7guxfa5o/1/

So in the end it looks like I have two incomplete options: To have columns which are needed to be floated to the right but vertical centering doesn't work or to have vertical centering without being able to float the columns.

You can ignore the JavaScript part there because it's mainly used to detect if the browser window size is Medium size or not and then apply some formatting, styling rules.

Any alternative way that could work would be really appreciated or any suggestions of what else I could try.

Sai Manoj · Accepted Answer

As per my understanding, you need to display your items in an alternative order in large screens. Why don't you order them alternative in the HTML code itself? Please check the fiddle and let me know if you are looking for the same.


  
    
      
        IŠPARDUOTA
        
          Asun inhaliatorius „Energy + B12“ 
        
        
          

            Asun inhaliatorius „Energy + B12“
                        Išskirtinis Asun inhaliatorius, turintis net dvi veikliąsias medžiagas, maksimaliam poveikiui. Gaivaus arbūzų skonio „Energy + B12“ inhaliatorius išsklaidys blogą nuotaiką ir papildys energijos rezervus. Vitamino
            B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Taurinas vaidina svarbų vaidmenį vitamino B12 sintezėje. Inhaliavimas užtikrina
            maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          
          
            
          
           
        
        Sužinoti daugiau
      
      
        
      
    
  
  
    
      
        IŠPARDUOTA
        
          Asun inhaliatorius „Sleep“ 
        
        
          

            Asun inhaliatorius „Sleep“
                        Dažnai sunku užmigti dėl kankinančios nemigos? Su Asun "Sleep" užmikite greičiau ir pagerinkite miego kokybę . Sudėtyje esantis melatoninas, dažnai dar vadinamas „miego hormonu“, nes melatonino didelis
            kiekis gali padėti jums užmigti. Melatoninas yra hormonas, kuris reguliuoja bei gilina miegą. Dėka Asun technologijų, inhaliuojant medžiagų įsisavinimas tampa efektyvesnis, išvengiant susidurimo su virškinamuoju traktu. Į organizmą
            patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          
          
            
          
           
        
        Sužinoti
                    daugiau
      
      
        
      
    
  
  
    

      
        
      
      
        IŠPARDUOTA
        
          Asun inhaliatorius „Diet“ 
        
        
          

            Asun inhaliatorius „Diet“
                        Gaivaus greipfrutų skonio, praturtintas triptofanu, kuris organizme vėliau virsta į seratoniną. O kaip žinia, seratoninas aktyviai dalyvauja reguliuojant apetitą. Pats inhaliavimas užtikrina maksimaliai
            greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          
          
            
          
           
        
        Sužinoti
                    daugiau
      
    
  
  
    
      
        IŠPARDUOTA
        
          Asun inhaliatorius „ Vitaminas B12“ (braškė) 
        
        
          

            Asun inhaliatorius „ Vitaminas B12“
                        Vitamino B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Gaukite reikiamas vitamino B12 dozes
            Asun inhaliatoriaus pagalba. Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių
            dėka patenka tiesiai į kraują.

          
          
            
          
           
        
        Sužinoti daugiau
      
      
        
      
    
  
  
    

      
        
      
      
        
          Asun inhaliatorius „Focus“ 
        
        
          

            Asun inhaliatorius „Focus“
                        Įveikite stresą ir nerimą, pagerinkite savo koncentraciją su Asun FOCUS. Sudėtyje esančios Romos ramunėlės dar Romos imperijos laikais būdavo duodamos kariams siekiant skatinti jų koncentraciją ir drąsą. Romos
            ramunėlės padeda kovojant su nerimu ir depresija, o taip pat mažina alergijas, gerina miego kokybę, teigiamai veikia odą, virškinimo traktą, širdies darbą, pasižymi priešvėžinėmis savybėmis.

          
          
            
          
           
        
        Sužinoti
                    daugiau
      
    
  
  
    
      
        IŠPARDUOTA
        
          Asun inhaliatorius „Relax“ 
        
        
          

            Asun inhaliatorius „Relax“
                        Siekiant greito nusiraminimo streso metu, jums gali puikiai pasitarnauti Asun “Relax” inhaliatorius. Levandų skonio “Relax” sudėtis, praturtinta triptofanu, maisto medžiaga, padedančia nusiraminti ir pagerinti
            miego kokybę. Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai
            į kraują.

          
          
            
          
           
        
        Sužinoti
                    daugiau
      
      
        
      
    
  
  
    

      
        
      
      
        IŠPARDUOTA
        
          Asun inhaliatorius „ Vitaminas B12“ 
        
        
          

            Asun inhaliatorius „ Vitaminas B12“
                        Vitamino B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Gaukite reikiamas vitamino B12 dozes
            Asun inhaliatoriaus pagalba. Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių
            dėka patenka tiesiai į kraują.

          
          
            
          
           
        
        Sužinoti daugiau

Solution 2) Using CSS, you can define two classes to move your element left and right respectively for lg screens.

@media screen and (min-width: 992px) {
 .shift-right{
   right:-50%;
  }
 .shift-left{
  left:-50%;
  }
}

Here is the working fiddle using CSS

Bootstrap 3 make row's column float to right

Answers (1)

Related Questions

Bootstrap 3 make row&#39;s column float to right

Answers (1)

Related Questions

Bootstrap 3 make row's column float to right